一个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="100%;">
            <div id="bySector" style="49%;height:400px;display:inline-block;"></div>
            <div id="byBU" style="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花了不少时间，甚至会犯很多很微小的错误，比如中文的逗号，分号结尾种种（捂脸）

而且这个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真是我这种数据结构白痴的福音！