将附加数据设置为highcharts系列

Question

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

例如

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

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

谢谢大家.

Answer 1

是的,如果您设置如下所示的系列对象,其中每个数据点都是一个哈希值,那么您可以传递额外的值:

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/

Answer 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'
    }]
}]

谢谢尼克.

Answer 3

对于时间序列数据,特别是有足够的数据点来激活turbo阈值,上面提出的解决方案将不起作用.在turbo阈值的情况下,这是因为Highcarts期望数据点是一个数组,如:

series: [{
    name: 'Numbers over the course of time',
    data: [
      [1515059819853, 1],
      [1515059838069, 2],
      [1515059838080, 3],
      // you get the idea
    ]
  }]

为了不失去turbo阈值的好处(这在处理大量数据点时很重要),我将数据存储在图表之外,并在工具提示formatter函数中查找数据点.这是一个例子:

const chartData = [
  { timestamp: 1515059819853, value: 1, somethingElse: 'foo'},
  { timestamp: 1515059838069, value: 2, somethingElse: 'bar'},
  { timestamp: 1515059838080, value: 3, somethingElse: 'baz'},
  // you get the idea
]

const Chart = Highcharts.stockChart(myChart, {
  // ...options
  tooltip: {
    formatter () {
      // this.point.x is the timestamp in my original chartData array
      const pointData = chartData.find(row => row.timestamp === this.point.x)
      console.log(pointData.somethingElse)
    }
  },
  series: [{
      name: 'Numbers over the course of time',
      // restructure the data as an array as Highcharts expects it
      // array index 0 is the x value, index 1 is the y value in the chart
      data: chartData.map(row => [row.timestamp, row.value])
    }]
})

此方法适用于所有图表类型.