Question

我的价值观是：

series: [{
        name: 'name1',
        data: data1,
        data2: data2,
        stack: 'normal'
    }, {
        name: 'name2',
        data: data3,
        data2: data4,
        stack: 'normal'
    }]

现在我需要做工具提示，但我不知道如何在这里更改值：

      headerFormat: '<table id="tablaTooltip"><tr>{point.x}</tr>',
      pointFormat: '<tr><td><span style="color: {series.color}"><i class="fa fa-square"></i></span>{series.name}:</td><td style="text-align: right">{point.y}</td></tr>',
      footerFormat: '</table>',

Point.y与数据相同，但我需要show data2。

谢谢！

Answer 1

由于data2是您的自定义数据而不是默认的highcarts，因此您必须手动检索它。我假设data1和data2具有相同的大小，现在您知道data2所在的位置

tooltip: {    
    formatter: function() {
       var point = this.point;
       point.y2 = this.series.options.data2[point.index];
       return '<b>my data1 point: ' + point.y + '<br/> my data2 point: ' + point.y2;
    }    
}

Answer 2

我不确定您是否可以使用data2属性，因为它没有内置于` Highcharts 。如果您想在图表中使用自定义数据，可以这样做。

series: [{
    name: 'Foo',
    data: [{
        y: 3,
        myData: 'firstPoint'
    }, {
        y: 7,
        myData: 'secondPoint'
    }, {
        y: 1,
        myData: 'thirdPoint'
    }]
}]

然后将其格式化为

formatter: function () {
    return 'Extra data: <b>' + this.point.myData + '</b>';
}

如果您想查看类似于Highcharts Custom数据加载的内容，您可以查看此天气网站Weatherion

格式化highcharts工具提示

2 个答案: