点击Highcharts标记时重定向到URL

ggazkfy8  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(155)

如何在Highcharts时间序列中传递第三个值(例如ID号),以便在标记单击时基于该值打开一个新窗口?JsFiddle here.
我熟悉这个方法,它适用于有类别的simple chart,但不适用于时间序列。
通常情况下,Highcharts时间序列接受一系列数组,如[1401285311000,1],这些数组可以在带有event.point.options.xevent.point.options.y的click事件中读取。
有没有办法给每个点添加一个id,然后在点的click事件回调中读取它?我试过把它作为第三个值传递(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
    });
});
kg7wmglp

kg7wmglp1#

仅仅因为它是时间数据并不意味着你不能使用点对象来代替数组:

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

相关问题