一个highcharts混合图Demo
公司要我做一个highcharts的mockup，其实半个小时就能做完了，我做了将近两个小时，唉！不过还好，总算把东西学会了。勤能补拙！
把代码贴上来
布局很简单，一个div里套两个div，给好id，就可以开始写js了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title></title> <link rel="stylesheet" src="./css/common.css" /> </head> <body> <div style="width:100%;"> <div id="bySector" style="width:49%;height:400px;display:inline-block;"></div> <div id="byBU" style="width:49%;height:400px;display:inline-block;"></div> </div> <script src="./js/jquery-1.8.3.min.js"></script> <script src="./js/highcharts/highcharts.js"></script> <script src="./js/highcharts/exporting.js"></script> <script src="./js/common.js"></script> </body> </html>
JS
写JS花了不少时间，甚至会犯很多很微小的错误，比如中文的逗号，分号结尾种种（捂脸）
而且这个mockup是要有两个Y轴的，有一个Y轴要有百分号，并且数字部分得是浮点数，要用jQuery的parseFloat()转换一下，再用format属性加上%后return出来。
然后还要在series里写上yAxis的序号，要不然数据对应不上，
最后要在series里写上type，type在很多地方都可以改变，在plotOptions里也可以改type。
$(function () { /* Highcharts.setOptions({ colors:['#058DC7','#50B432','#ED561B','#DDDF00','#24CBE5','#64E572','#FF9655', '#FFF263', '#6AF9C4'] }); */ var bySector = new Highcharts.Chart({ chart: { renderTo: 'bySector', type: 'column' }, title: { text: 'By Sector 必须使用数量和使用率' }, xAxis: { categories: ['Comsumer总体', 'OTC总体', 'XJP总体'] }, yAxis: [ { tickInterval: 500, min: 0, max: 3500, title: { text: '必须使用量' } }, { tickInterval: 10.00, min: parseFloat(0).toFixed(2), max: parseFloat(100).toFixed(2), title: { text: '使用率' }, format: '{value}%', opposite : true, labels : { formatter : function() { return parseFloat(this.value).toFixed(2) + '%'; } } }, ], credits:{ enable: false, text: "" }, legend:{ enable: true, layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100 }, plotOptions:{ spline:{ allowPointSelect: true, animation: true, cursor: 'pointer', dataLabels:{ enabled: true, rotation: 0 }, enableMouseTracking: true } }, series: [ { yAxis: 0, name: '必须使用量', data: [119, 633, 2985] }, { type: 'line', color: '#D6CCA2', yAxis: 1, name: '使用率', data: [31.09, 74.25, 50.69] } ] }); var byBU = new Highcharts.Chart({ chart: { renderTo: 'byBU', type: 'column' }, title: { text: 'By BU 必须使用数量和使用率' }, xAxis: { categories: ['Marketing', 'PR', 'R&D','RA','Sales','Empty','Consumer总体'] }, yAxis: [ { tickInterval: 20, min: 0, max: 140, title: { text: '必须使用量' } }, { tickInterval: 10.00, min: parseFloat(0).toFixed(2), max: parseFloat(100).toFixed(2), title: { text: '使用率' }, format: '{value}%', opposite : true, labels : { formatter : function() { return parseFloat(this.value).toFixed(2) + '%'; } } }, ], credits:{ enable: false, text: "" }, legend:{ enable: true, layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100 }, plotOptions:{ spline:{ allowPointSelect: true, animation: true, cursor: 'pointer', dataLabels:{ enabled: true, rotation: 0 }, enableMouseTracking: true } }, series: [ { yAxis: 0, name: '必须使用量', data: [21, 2, 3, 1, 51, 41, 119] }, { type: 'line', color: '#D6CCA2', yAxis: 1, name: '使用率', data: [47.62, 100.00, 0.00, 0.00, 39.22, 12.20, 31.09] } ] }); });
最后，JSON真是我这种数据结构白痴的福音！