Question

是否有人知道如何使高图中的系列可点击？如果您单击其中一个项目，它将带您到外部链接？

我查看了文档，但在高等图表中找不到选项。

http://www.highcharts.com/docs/chart-concepts/series

这是文档中提供的小提琴。如果有人可以使这个系列可点击，那将是非常棒的！

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays/

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

谢谢你！

Answer 1

你可以试试这个

series: {
cursor: 'pointer',
         point: {
             events: {
                   click: function() {
                        //your logic
                     }
                   }
                }
 }

More info

Answer 2

试试这个。运行demo： -

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        minPadding: 0.05,
        maxPadding: 0.05
    },

    series: [{
        data: [
            [0, 29.9], 
            [1, 71.5], 
            [3, 106.4]
        ]
    }],


     plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            //do your stuff
                            alert([this.x,this.y]);
                        }
                    }
                },
                marker: {
                    lineWidth: 1
                }
            }
        },
});

}）;

Answer 3

您可以在点对象中设置url（或使用全局），在点上捕获click事件并运行window.location。

plotOptions: {
                 series: {
                     cursor: 'pointer',
                     point: {
                         events: {
                             click: function () {
                                 var url = this.options.url;
                                 window.open(url);
                             }
                         }
                     },
                 }
             },
    series: [{
                 data: [{
                     x: 0,
                     y: 29.9,
                     url: 'http://www.google.com'
                 }, {
                     x: 1,
                     y: 71.5,
                     url: 'http://www.yahoo.com'
                 }]
             }]

http://jsfiddle.net/287JP/2/

在Highcharts中制作系列可点击

3 个答案: