如何将数据标签与数据一起传递，以便在高图中的工具提示中显示

how to pass datalabels along with data to show it in tooltip in highchart

本文关键字：数据高图中工具提示显示标签一起更新时间：2023-09-26

我使用的列带有向下钻取的highchart。

 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，然后在工具提示中显示它。这怎么可能？

对于您的数据点，将数据设置为点对象：

[
    {
        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，只要它不会与保留的属性名称冲突即可。此处为通用演示。将鼠标悬停在第一点上。