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

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

(1)仪表图

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'
    }
};

(2)柱状图(动态的)

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: '{point.key}',
        pointFormat: '' +
            '',
        footerFormat: '
{series.name}: {point.y:.1f} μg/m³
', 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, }, };

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



你可能感兴趣的:(GIS)