为 Highcharts 多条曲线设置不同鼠标悬停显示格式(单位

做了两条曲线 (同x轴, 双y轴), 可是显示的格式是相同的, 找了好久没找到明确的解决办法, 找到了显示的源头, 才想到从那入手, 这里简单记个笔记.

1. 首先是双 y 轴的坐标轴单位的设置, 其实很简单, 就是一个标签 lables:

// y 轴数据
yAxis: [
    { // 第一条, 默认在左边
        title: "title_1",  // y 轴标题
        labels: {
            format: '{value} km'  // value 是坐标刻度值, km 是自己定义的单位
        }
    },{ // 第二条
        title: "title_2",
        labels: {
            format: '{value} km/h' // 第二个单位
        },
        opposite: true // Y轴分立两侧, 设置到右边
    }
]

2. 然后是设置对应的数据

series: [
{   // Data1
    name: 'data_1',  // 重要 1: 后面根据数据名设置不同单位
    yAxis: 0,  // 重要 2: 设置对应的y轴数据, 第一条为 yAxis[0].
    max : 80,
    min : -40,
    data: **** // 数据随意, 一般初始化为0, 动态的后面再刷新加入
},{ // Data2
    name: 'data_2',
    yAxis: 1,
    data: ****
}],

3. 最后就是设置鼠标显示单位, 鼠标放在数据点上显示的数据格式:

tooltip: {
formatter: function(){
    if ("data_1" === this.series.name) // 根据数据的名字来判断
        return '<b>' + this.series.name + '</b><br/>' + this.y + '单位1'; // 显示格式
    else {
        return '<b>' + this.series.name + '</b><br/>' + this.y + '单位2';
    }
}
}