<div id="TradeMoney"></div> <script> $(function () { initData(); }); function initData() { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'TradeMoney', //放置图表的容器 plotBackgroundColor: null, plotBorderWidth: null, defaultSeriesType: 'line', reflow: true //默认为true 所以可以不配置 }, title: { text: '订单金额曲线' }, subtitle: { text: '' }, xAxis: {//X轴数据 categories: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06', '2015-07', '2015-08', '2015-09', '2015-10'], labels: { rotation: -45, //字体倾斜 align: 'right', style: { font: 'normal 13px 宋体' } } }, yAxis: {//Y轴显示文字 title: { text: '订单金额/元' } }, tooltip: { enabled: true, formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1); } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true//是否显示title } }, series: [{ name: '总金额', data: [0, 0, 0, 0, 0, 0, 0, 0, 19.4, 0] }, { name: '成功金额', data: [0, 0, 0, 0, 0, 0, 0, 0, 10.3, 0] }, { name: '失败金额', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }] }); } </script>
注意:
1、数据格式要一致,X轴['a','b','c','d'],Y轴[0,0,0,3],可以在后台进行字符串拼接value="["+....+"]",然后在前台转换成对象eval(value);
2、highcharts.js版本一定要与JQuery对应,否则会出现首次加载有数据无折线,只有拖动窗体改变其大小后才显示折线,坑惨了,切记;
3、显示图表的div容器的高和宽如果未指定,将默认是400*400。