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

时间:2016-05-03 06:12:18

标签: javascript 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,然后在工具提示中显示。怎么可能呢?

1 个答案:

答案 0 :(得分:2)

对于您的数据点,将数据设置为点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。将鼠标悬停在第一个点上。