Highcharts翻译系列之二十二：柱状图例子
代码：
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highcharts Example</title> <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', margin: [35, 10, 40, 50], plotBorderWidth: 1, plotBorderColor: '#625f5f', animation: false, style: { fontFamily: 'Microsoft YaHei', fontSize: '12px', color: '#262626' } }, colors: [ '#7bd5f3', '#fbe659', "#fca108", ], title: { text: '柱状图', x: 60, y: 9, style: { // display: 'none', fontFamily: 'Microsoft YaHei', fontSize: '20px', fontWeight: 'Bold', color: '#262626' } }, subtitle: { style: { display: 'none' } }, xAxis: { //lineWidth: 1, // lineColor: '#625f5f', labels: { style: { color: '#262626', fontSize: '12px', marginTop: 5 } }, categories: ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质'] }, yAxis: { allowDecimals: false, min: 0, max: 100, alternateGridColor: '#f6f6f6', // lineWidth: 1, gridLineWidth: 1, //tickPosition: 'inside', gridLineColor: '#c5c5c5', //offset: -3, // lineColor: '#625f5f', plotLines: [{ value: 30, color: '#439c07', dashStyle: 'solid', width: 2, label: { text: '倾向', align: 'left', x: -25, style: { color: '#439c07' } } }, { value: 40, color: '#dd0202', dashStyle: 'solid', width: 2, label: { text: '判定', align: 'left', x: -25, style: { color: '#dd0202' } } }], title: { text: '分数', style: { display: 'none' } }, labels: { enabled: false } }, legend: { layout: 'horizontal', backgroundColor: '#FFFFFF', align: 'right', verticalAlign: 'top', x: 0, y: -10, floating: true, shadow: false, enabled: false }, tooltip: { formatter: function () { return '' + this.x + ': ' + this.y + '分'; } }, plotOptions: { column: { pointPadding: 0.001, borderWidth: 0, shadow: false, animation: false } }, series: [{ name: '我的主要体质', data: [{ y: 10, color: 'red', name: '5' }, { y: 23, color: '#7bd5f3', name: '5' }, { y:45, color: '#7bd5f3', name: '5' }, { y: 70, color: '#fbe659', name: '5' }, { y: 55, color: '#7bd5f3', name: '5' }, { y: 60, color: '#fca108', name: '5' }, { y: 32, color: '#7bd5f3', name: '5' }, { y: 65, color: '#7bd5f3', name: '5' }, { y: 24, color: '#7bd5f3', name: '5'}], dataLabels: { enabled: true, rotation: 0, color: '#262626', align: 'center', x: -3, y: 15, formatter: function () { if (this.y != 0) { return this.y + "分"; } }, style: { fontSize: '13px', fontFamily: 'Microsoft YaHei' } } }] }); }); }); </script></head><body> <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script> <!-- <script src="../../js/modules/exporting.js"></script>--> <div id="container" style="width: 800px; height: 475px; margin: 0 auto"> </div></body></html>
运行效果：
