javascript - 如何将数据标签与数据一起传递以在 highchart 的工具提示中显示

Question

我正在使用带有向下钻取 Highcharts 的列。

 series: [{
                    name: 'Attendance',
                    colorByPoint: true,
                    data: [{
                        name: 'Jan',
                        y: Attendances.data.YearlyReport[0],
                        drilldown: 'Jan',
                    }, ...]
                }],  
  drilldown: {
                    series: 
                        [{
                        name: 'Jan',
                        id: 'Jan',
                        data: [
                            [
                                '1',
                                parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])

                            ],
                            [
                                '2',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
                            ],
                            [
                                '3',
                                  parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
                            ],
                           ...
                        ]}, 
                        {
                        name: 'Feb',
                        id: 'Feb',
                        data: [
                               ....

我想将一些字符串传递给每个向下钻取系列数据，即

'1',
 parseFloat(Attendances.data.MonthlyReport[1      *  33 + 1])

我想将更多信息附加到 1，然后在工具提示中显示。怎么可能？

Answer 1

对于您的数据点，将数据设置为点 object :

[
    {
        x: '1',
        y: parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1]),
        yourNote: 'some text you want to add'
    },
    {
        x: '2',
        y: parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2]),
        yourNote: 'some other text you want to add'
    },
...
]

然后，在您的工具提示中，使用 formatter显示 yourNote 属性:

tooltip: {
  formatter: function() {
    console.log(this); //so you can see what other properties exist
    if (!this.point.yourNote) {
      return 'The value for <b>' + this.x +
        '</b> is <b>' + this.y + '</b>';
    } else {
      return 'The value for <b>' + this.x +
        '</b> is <b>' + this.y + '</b>' +
        '<br />' + this.point.yourNote;
    }

  }
},

只要不与保留的属性名称冲突，您可以随意调用属性yourNote。通用演示 here .将鼠标悬停在第一个点上。