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
}]
复制代码