highcharts個性化儀表盤

一、背景：之前使用過echarts圖表，最新公司根據客戶需求准備開發個儀表盤美工出圖如下。

 

　　由於公司產品集成highcharts，發現highcharts儀表盤不滿足需求，顧個性化開發。

二、過程：

echarts：百度開發，Api目前支持不好，主要采用canvas畫圖。

highcharts： 國外產品，Api全面，還有各路大神的個性化圖表，主要采用svg畫圖。 

也有人說：echarts相當於中國的WPS，而highchart相當於微軟office

建議，如果使用百度地圖展示圖表，那么使用echarts（ps：支持國產）

如果以上兩款不滿足需求，那么可以上手 d3js，圖表更多更強大。

　　官網地址：  https://github.com/d3/d3/wiki/Gallery

　　api地址（中文的）：https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C

三、結果：

上圖：（雖然差別還是有，基本滿足需求）

上代碼：https://code.hcharts.cn/demos/hhhhiD 打開地址，直接復制粘貼，運行看結果。

js：

// 公共配置
Highcharts.setOptions({
    chart: {
        type: 'solidgauge'
    },
    title: {
        text: '',
    },
    pane: {
        center: ['50%', '60%'],
        size: '100%',
        startAngle: -140,
        endAngle: 140,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#fff',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },
    tooltip: {
        enabled: false
    },
    yAxis: {
        plotBands: {
            //borderColor:'#000000',
           // borderWidth:0,
            from: 0,
            to: 250,
            color: '#FFCCFF' // green
        },
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.7, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 100,//像素間隔
        tickWidth: 2,
        tickAmount: 10,//刻度總數
        tickPosition: 'inside',// 刻度線位置 內外
        tickLength: 15,
        //tickmarkPlacement:'between',
        tickColor: '#ffffff',
        // visible:false,//坐標軸是否顯示
        title: {
            y: -50
        },
        labels: {
            enabled:false,
            y: 16
        }
    },
    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: -20,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
});
// 速度儀表
var chart1 = Highcharts.chart('container-qtd', {
    yAxis: {
        min: 0,
        max: 200,
        title: {
            text: 'QTD'
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        data: [{
            y:150,
            innerRadius: 80,
            // radius: 98,
            name:'dd',
        }],
        dataLabels: {
            style: {
                fontWeight: 'bold',
                fontSize: '20px',
                color: 'black'
            },
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}%</span><br/>' +
            '<span style="font-size:12px;color:silver">2462M</span></div>'
        }
    }]
});
// 轉速儀表
var chart2 = Highcharts.chart('container-mtd', {
    yAxis: {
        min: 0,
        max: 150,
        title: {
            text: 'MTD'
        }
    },
    credits: {//取消官網鏈接highcharts.com
        enabled: false,
        //添加自己的鏈接地址
        // text: 'www.baidu.com',
        //  href: 'https://www.baidu.com'
    },
    series: [{
        name: 'RPM',
        data: [{
            y:58,
            innerRadius: 80,
            // radius: 98,
            name:'dd',
        }],
        dataLabels: {
            style: {
                fontWeight: 'bold',
                fontSize: '20px',
                color: 'black'
            },
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}%</span><br/>' +
            '<span style="font-size:12px;color:silver">58M</span></div>'
        }
    }]
});

html：

<div style="width: 600px; height: 300px; margin: 0 auto">
    <div id="container-qtd" style="width: 300px; height: 200px; float: left">
    </div>
    <div id="container-mtd" style="width: 300px; height: 200px; float: left">
    </div>
</div>

 

 

后記：

　　當圖表值太大，有時間圖表顯示不全，顯示一半，官方解釋：https://api.hcharts.cn/highcharts#yAxis.max

　　max值自動向上取整問題，刻度線 tickAmount導致的。

　　 tickAmount不設置就不會影響最大值問題。即max設置多少顯示多少，

　　 tickAmount設置為null、 0、2 都不管用。直接刪掉就好！不需要設置！！！