Question

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

我对simple chart类别的方法很熟悉，但不熟悉时间序列。

通常，Highcharts时间序列会接受一系列数组，例如[1401285311000,1]，可以在包含event.point.options.x和event.point.options.y的点击事件中阅读。

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

有什么想法吗？

// 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

1 个答案: