重定向到 Highcharts 标记上的 URL 单击

Question

如何在 Highcharts 时间序列中传递第三个值（例如 ID 号），以便我可以在标记点击时基于它打开一个新的 window？ JsFiddle here.

我熟悉此方法用于 simple chart 类别，但不熟悉时间序列。

通常，Highcharts 时间序列接受一系列数组，如 [1401285311000,1]，可以在单击事件中使用 event.point.options.x 和 event.point.options.y 读取。

有没有办法给每个点加一个id，然后在点的点击事件回调中读取？我试过将它作为第三个值传递（Highcharts 完全忽略它），或者将它放在打破图表的两个值 ([1401285311000, 1, id: {1}]) 之后的 id 下。

有什么想法吗？

// Replacing ajax call with a simple array for simplicity's sake
var data = [{"name":"Value","unit":"","data":[[1401285311000,5, 1],[1401288036000,10, 2],[1401289436000,8, 3],[1401291099000,15, 4]]}, {"name":"Value 2","unit":"","data":[[1401285311000,10, 1],[1401288036000,12, 2],[1401289436000,5, 3],[1401291099000,9, 4]]}]


$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'Time Series'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            minRange: 14 * 24 * 3600 // fourteen days
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        legend: {
            enabled: false
        },
                        plotOptions: {
                    series: {
                        lineWidth: 3,
                        marker: {
                            fillColor: null,
                            lineWidth: 2,
                            lineColor: null, // inherit from series

                        },
                        events:{
                                click: function (event, i) { 
                                   console.log(event.point);
                                }
                            }
                    },
                    line: {
                        dataLabels:{
                            enabled: false
                        }
                    },
                },

        series: data
    });
});

Answer 1

只是因为它是时间数据并不意味着你不能使用 point objects 而不是数组：

var data = [{
    "name": "Value",
        "unit": "",
    "data": [
        {x: 1401285311000, y: 5, id: 1},
        {x: 1401288036000, y: 10, id: 2},
        {x: 1401289436000, y: 8, id: 3},
        {x: 1401291099000, y: 15, id: 4}
    ]
}, {
    "name": "Value 2",
        "unit": "",
        "data": [
        {x: 1401285311000, y: 10, id: 1},
        {x: 1401288036000, y: 12, id: 2},
        {x: 1401289436000, y: 5, id: 3},
        {x: 1401291099000, y: 9, id: 4}
    ]
}];

已更新 fiddle。

重定向到 Highcharts 标记上的 URL 单击

Redirecting to a URL on Highcharts marker click

javascript

charts

highcharts