如何将特定的超链接添加到highcharts折线图？

Question

例如，在此演示中： http : //www.highcharts.com/demo/line-ajax ，当您单击点时，会弹出一个包含信息的弹出窗口。 尽管看一下代码，它似乎是每个点的函数。

如何将链接到另一页面的单击功能添加到每个单独的点？ 例如，示例中的点按月划分。 我希望能够单击一个月，然后说一个月的Wikipedia页面。

我基本上没有JavaScript经验，或者说真的，没有任何与Web设计有关的经验，如果这很简单，我深表歉意！

谢谢！

Answer 1

为了打开特定点的特定链接，您必须在数据本身的点对象中提供一些信息。

如果每个点都将打开一个完全不同的页面，则可以提供完整的URL，也可以提供一个唯一的标识符，然后该页面将用于显示特定内容。

然后，在plotOptions中设置事件处理程序：

plotOptions: {
        series: {
                cursor:'pointer',
                point:{
                    events:{
                        click:function() {
                            var href = 'http://www.google.com?q=' + this.options.q;
                            window.open(href);
                        }
                    }
                }
            }
        },

在此示例中，我在事件处理程序中提供了基本URL，并针对每个单独的点从点对象中拉出了查询参数。

例：

• http://jsfiddle.net/jlbriggs/8YRq9/

Answer 2

不需要编码的注释，将重定向到新页面，紧随其后。

$(function () {

    // Get the CSV and create the chart
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {

        $('#container').highcharts({

            data: {
                csv: csv,
                // Parse the American date format used by Google
                parseDate: function (s) {
                    var match = s.match(/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$/);
                    if (match) {
                        return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
                    }
                }
            },

            title: {
                text: 'Daily visits at www.highcharts.com'
            },

            subtitle: {
                text: 'Source: Google Analytics'
            },

            xAxis: {
                type: 'datetime',
                tickInterval: 7 * 24 * 3600 * 1000, // one week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            },

            yAxis: [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],

            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },

            tooltip: {
                shared: true,
                crosshairs: true
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function (e) {
                                // hs.htmlExpand(null, {
                                //     pageOrigin: {
                                //         x: e.pageX,
                                //         y: e.pageY
                                //     },
                                //     headingText: this.series.name,
                                //     maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
                                //         this.y +' visits',
                                //     width: 200
                                // });
                                window.location.href = "http://stackoverflow.com";

                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                name: 'All visits',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: 'New visitors'
            }]
        });
    });

});