基于Highchart制作仪表图和柱状图

Highchart是Javascript做图表中非常好的第三方类库，效果非常炫，而且很容易上手，关于Highchart的具体用法和API参考，Highchart中文网有很详细的介绍，而且范例很多，提供在线测试代码，这是我自己写的，两个图的参数，给定参数，再加一句代码图表就出来了，留下备查

（1）仪表图

<span style="font-size:24px;">var gaugeoptions = {
    chart: {
        renderTo: 'gaugediv',
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,             //绘图区边框宽度
        plotShadow: false,             //绘图区阴影
        spacingTop:5,
    },
    title: {
        text: false,
       
    },
    pane: {
        startAngle: -150,
        endAngle: 150,
        background:[],
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 500,        
        minorTickInterval: 50,
        minorTickWidth: 0,
        tickWidth: 0,
        tickInterval: 50,
        tickPosition: 'inside',
        labels: {
            distance: 5,
            rotation: 'auto',
            style: {
                color: '#6D869F',
            }
        },
        plotBands: [{
            from: 0,
            to: 50,
            color: '#00E400' 
        }, {
            from: 51,
            to: 100,
            color: '#FFFF00' 
        }, {
            from: 101,
            to: 150,
            color: '#FF7E00' 
        },
        {
            from: 151,
            to: 200,
            color: '#FF0000' 
        },
        {
            from: 201,
            to: 300,
            color: '#99004C' 
        },
        {
            from: 300,
            to: 500,
            color: '#7E0023'
        }]
    },
    plotOptions: {
        gauge: {
            dataLabels: {
                borderWidth:0,
                useHTML:true,
                color: backcolor,
                format: '{y}',
                style: {
                    font: '800 18px "微软雅黑",arial,"宋体"',
                }
                    
            },
            dial: {
                radius: '100%'
            }
        }
    },
    series: [],
    credits: {
        enabled: false,
    },
    point: {
        color: '#7E0023'
    }
};</span>

（2）柱状图（动态的）

<span style="font-size:24px;">var columnchartoptions = {
    chart:{
        renderTo: 'detail',
        type: 'column',
        width: 370,
        height:200,
    },
    title: {
        text: '',
        style: {
            font: '800 10px "微软雅黑",arial,"宋体"',
        }
    },
    xAxis: {
        categories: [],
        style: {
            font: '800 10px "微软雅黑",arial,"宋体"',
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '值 (μg/m³)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} μg/m³</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
        },
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        highlight(this.category);
                    }
                }
            }
        }
    },
    credits: {
        enabled: false,
    },
    legend: {
        margin:5,
        symbolHeight:6,
        symbolWidth: 10,
        verticalAlign: "bottom",
        padding:4,
    },
};</span>

再加一个图表的点击事件，柱状图的参数里已经有了，返回this.category,就是当前点击柱子对应的x轴的categories，this.x是返回当前柱子在x轴中序号（1、2、3.。。）this.y就是y值了。