Highcharts使用——图表使用（一）

legend

• 作用：图例是一个框，其中包含图表中每个系列项目或点项目的符号和名称。
• 代码：

legend: {
    enabled:true,
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
}

plotOptions

• 作用：绘图选项对图形的属性进行包装，处理
• 代码：

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            formatter: function () {
                //每个点值
                let yDatas = this.series.yData;

                //最大值
                let maxV = Math.max(...yDatas);
                //最小值
                let minV = Math.min(...yDatas);
                //最后一个值
                let dataLength = yDatas.length;
                let lastV = yDatas[dataLength - 1];

                if (this.y == minV || this.y == lastV) {
                    return this.y;
                } else {
                    return '';
                }
            }
        }
    }
},

tooltip

• 作用：鼠标放置时显示效果配置
• 建议：格式化时有formatter属性可用，但是还是建议使用headerFormatter-pointFormatter-footerFormatter进行格式化，因为比较全面
• 代码：

tooltip: {
    shared: true,
    useHTML: true,
    headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
    pointFormatter: function () {
        let hpValue = this.y;
        let name = this.series.name;
        let color = this.series.color;
        debugger;

        if (hpValue < 1000) {
            let value =
                '<tr><td style="color: ' +
                color +
                '">' +
                name +
                ' </td>' +
                '<td style="text-align: right"><b>' +
                hpValue.toFixed(2) +
                '  GH/s' +
                '</b></td></tr>';
            return value;
        } else if (hpValue <= 1000000) {
            let value =
                '<tr><td style="color: ' +
                color +
                '">' +
                name +
                ' </td>' +
                '<td style="text-align: right"><b>' +
                (hpValue / 1000).toFixed(2) +
                '  TH/s' +
                '</b></td></tr>';
            return value;
        } else if (hpValue >= 1000000) {
            let value =
                '<tr><td style="color: ' +
                color +
                '">' +
                name +
                ' </td>' +
                '<td style="text-align: right"><b>' +
                (hpValue / 1000000).toFixed(2) +
                '  PH/s' +
                '</b></td></tr>';
            return value;
        }
    },
    footerFormat: '</table>'
}

图片实例