将对象附加到Highcharts单击事件

时间:2017-10-06 15:58:24

标签: javascript highcharts

从D3转到Highcharts,这是我的意思。我有一个相当复杂的对象,其中包含一个clickthrough对象,需要在系列中点击的函数中访问。我使用数据和名称创建了具有小转换的系列数组,但我还需要将此对象附加到数据点。不知道怎么样。

快速举例。原始数据:

[
  {
    "key": "Super Cool Thing",
    "format": ".2f",
    "values": [
      {
        "label": "01",
        "value": 9.5,
        "format": ".2f",
        "order": 0,
        "tooltip": "numerator = 133, denominator = 14",
        "clickthrough": {
          "output_format": "json",
          "metrics": "",
          "options": {
            "columns": [
              {
                "order": 1,
                "display_as": "Brand",
                "format": "{0}",
                "name": "brand",
                "data_type": "string"
              },
              {
                "order": 2,
                "display_as": "Last Submit Time (Month)",
                "format": "%m",
                "name": "last-submit-time-month",
                "data_type": "datetime"
              },
              {
                "order": 3,
                "display_as": "Agent Things",
                "format": "{0}",
                "name": "agent-thing-values",
                "data_type": "string"
              }
            ]
          },
          "cut_y": "brand",
          "type": "",
          "filter": { },
          "cut_x": "last-submit-time-month"
        },
        "metrics": [
          {
            "name": "Agent - Feel Appreciated Mean",
            "slug": "qcustomersatr4-mean"
          }
        ]
      }
    ]
  }
]

贯穿(超快速POC)功能:

for(let i = 0; i < data.length; i++){
   var values = [];
    var xcuts = [];

    data[i].values.forEach(val => {
      values.push(val.value);
      xcuts.push(val.label);
    });

    chart.addSeries({
        name: data[i].key,
        data: values
    })

    chart.xAxis[0].setCategories(xcuts);
 }

这一切都很好。但是我需要clickthrough对象,所以我可以做类似的事情:

plotOptions: {
      series: {
        allowPointSelect: true,
        cursor: 'pointer',
            point: {
                events: {
                    click: function (event) {
                        console.log('CLICKTHROUGH DATA HERE');
                        console.log(event.point);
                    }
                }
            }
      },
    },

我不确定如何格式化系列数据以包含稍后在事件功能中可访问的其他数据。我目前通过d3这样做,这很好,但我正在努力与Highcharts方法做同样的事情。我似乎无法在系列或数据中添加任何我想要的东西,这可能吗?

1 个答案:

答案 0 :(得分:1)

拥有它。我必须明确设置y值,然后我可以添加在事件中可用的任何其他内容。

示例:

    data[i].values.forEach(val => {
      values.push({link: val.clickthrough, y:val.value}); 
      xcuts.push(val.label);
    });

    chart.addSeries({
        name: data[i].key,
      data: values
    })