将其他数据设置为高图表系列

javascript jquery highcharts

2022-08-30 05:13:29

有没有办法将一些额外的数据传递给序列对象，这些数据将用于显示在图表“工具提示”中？

例如

 tooltip: {
     formatter: function() {
               return '<b>'+ this.series.name +'</b><br/>'+
           Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
     }

在这里，我们只能使用 series.name，this.x和this.y到系列。假设我需要单独传递另一个动态值与数据集，并可以通过序列对象访问。这可能吗？

提前感谢大家。

答案 1

是的，如果按如下方式设置 series 对象（其中每个数据点都是一个哈希），则可以传递额外的值：

new Highcharts.Chart( {
    ...,
    series: [ {
        name: 'Foo',
        data: [
            {
                y : 3,
                myData : 'firstPoint'
            },
            {
                y : 7,
                myData : 'secondPoint'
            },
            {
                y : 1,
                myData : 'thirdPoint'
            }
        ]
    } ]
} );

在工具提示中，您可以通过传入对象的“point”属性来访问它：

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

此处的完整示例：https://jsfiddle.net/burwelldesigns/jeoL5y7s/

答案 2

此外，使用此解决方案，您甚至可以根据需要放置多个数据：

tooltip: {
    formatter: function () {
        return 'Extra data: <b>' + this.point.myData + '</b><br> Another Data: <b>' + this.point.myOtherData + '</b>';
    }
},

series: [{
    name: 'Foo',
    data: [{
        y: 3,
        myData: 'firstPoint',
        myOtherData: 'Other first data'
    }, {
        y: 7,
        myData: 'secondPoint',
        myOtherData: 'Other second data'
    }, {
        y: 1,
        myData: 'thirdPoint',
        myOtherData: 'Other third data'
    }]
}]

谢谢尼克。