javascript - 在热图 highcharts jquery 中添加额外信息，例如数据属性或 id

Question

我对热图 Highcharts 有一个要求。 单击每个单元格时我想要一些信息。

我尝试了以下代码:

plotOptions: {
        series: {
            events: {
                click: function (event) {
                    var str = event.point.series.yAxis.categories[event.point.y] + ',' +
                event.point.series.xAxis.categories[event.point.x]
                    alert(str);
                }
            }
        }
    }

这将为我提供 x 轴和 y 轴值。

但我想向每个单元格添加 id 或 data 属性，以便单击时我将获得该特定值。

任何帮助将不胜感激。

链接:https://jsfiddle.net/1f7L8u25/

Answer 1

您可以使用自定义属性添加更多信息。像这样:

series: [{
  x: 0, y: 0, value: 10, customAttrib: 'Text here', customNumber:  154},
  x: 0, y: 1, value: 19, customAttrib: 'Text here', customNumber:  141},
  ...
]}

然后您通过以下方式引用该字段:

plotOptions: {
  series: {
    events: {
      click: function (event) {
        var str = event.point.series.yAxis.categories[event.point.y] + ',' + event.point.series.xAxis.categories[event.point.x] + ',' + event.point.customAttrib + ',' + event.point.customNumber
        alert(str);
      }
    }
  }
},

这是一个工作示例(单击亚历山大，星期一或星期二): https://jsfiddle.net/ewolden/1f7L8u25/3/