making series in Highcharts clickable

Does anyone know how to make the series in the highcharts clickable? as in if you click one of the items it will take you to an external link?

I looked through the documentation and could not find an option in the highcharts.

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

Here is the fiddle provided in the doc. if anyone could make the series clickable that would be awesome!!

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]        
        }]
    });
});

thank you!

---

You can set url in your point object (or use global), catch click event on points and run 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/

---

You can try this

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

More info

---

Try this. Run 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
                }
            }
        },
});

});

链接地址: http://www.djcxy.com/p/74450.html

上一篇: HighCharts深入

下一篇: 在Highcharts制作系列点击