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

时间:2014-07-13 01:48:16

标签: javascript highcharts

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

如何将链接到另一个页面的点击功能添加到每个单独的点?例如,示例中的点按月拆分。我希望能够点击一个月然后说出上个月的维基百科页面。

我基本上没有使用JavaScript或者说实话,任何与网页设计有关的经验,如果这是微不足道的话,请道歉!

谢谢!

2 个答案:

答案 0 :(得分:2)

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

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

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

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

在这个例子中,我在事件处理程序中提供了一个基本URL,并将查询参数从每个单独点的点对象中拉出来。

示例:

答案 1 :(得分:0)

不需要编码的注释,重定向到新页面就在它之后插入。

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

});