highchart

highchart基本注意事項

1.每一個點的y值只能有兩種格式：null或者Number
複製代碼

highchart基本配置（公用方法）

1.由於項目較大，我才用在highchart基本配置文件中引入highcharts、highcharts-more、solid-guage、wordcloud，如:
    import Highcharts from "highcharts/highstock";
    import HighchartsMore from "highcharts/highcharts-more";
    
    HighchartsMore && HighchartsMore(Highcharts);
    require("highcharts/modules/solid-guage")(Highcharts);
    require("highcharts/modules/wordcloud")(Highcharts);
    
    export default Highcharts;
    
複製代碼

legend修改成畫成正方形+文字，顏色與對應的chart中線的顏色相同

作法：採用highchart畫正方形+文字，並設置其x、y的位置
代碼：

let chartNode = document.querySelector("#container"),
    vm = this,
    rect1 = null,
    text1 = null;

let drawLegend = chart => {
    rect1 = chart.render.rect({
        stroke : "red",
        "stroke-width"  4,
        width: 8,
        height: 8,
        x : chart.chartWidth - 140,
        y : 80
    })
    .css({
        fill : "red"
    })
    .add();
    
    text1 = chart.render
            .text("線1" , chart.chartWidth - 120 , 28)
            .css({
                fill : "red"
            })
            .add();
}

let _chartNode = Highcharts.chart(chartNode, {
    chart : {
        height : 350,
        type : "column",
        events : {
            load : function() {
                let chart = this;
                drawLegend(chart);
            },
            redraw: function() {
                let chart = this;
                rect1.destory();
                text1.destory();
                drawLegend(chart);
            }
        }
    }
})
複製代碼

儀表圖只有0~25%是紅色，25%～50%是黃色，50%～75%是藍色，75%～100%是綠色

作法：
yAxix : {
    stops : [
                [0 , "#0ebf9c"],
                [0.249 , "#0ebf9c"],
                [0.25 , "#46a3df"],
                [0.49 , "#46a3df"],
                [0.5 , "#E49831"],
                [0.749 , "#E49831"],
                [0.75 , "#e85655"],
                [1 , "#e85655"]
            ]
}
複製代碼

pie圖title居中對齊，去掉白邊

作法：

在不限時legend時，可用此代碼讓chart title居中對齊：
title: {
    verticalAlign: 'middle',
    floating: true,
    y : 5   //適當調整title的位置，讓其恰好處於中間的位置
}

去掉白邊
series : [{
    borderWidth : 0
}]
複製代碼