2

如何在甜甜圈 Highchart 中添加 URL 支持?我试过了,但我在 URL 中得到了未定义的错误。您的帮助将不胜感激。

这是我在系列中添加的

point: {
  events: {
    click: function(e) {
      location.href = e.point.url;
      e.preventDefault();
    }
  }
}

data = [{
      y: 55.11,
      color: colors[0],
      url: 'www.google.com', 
      drilldown: {
         name: 'MSIE versions',
         categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
         data: [10.85, 7.35, 33.06, 2.81],
         url: 'www.google.com',
         color: colors[0]
      }
}, { .......many more dataset ...

更新:

甜甜圈图的jsfiddle示例

4

2 回答 2

2

在这里查看这个小提琴

这是我用于添加到数据 url 链接的 highcharts 实例的方法。

在实例化一个新的高图时,您需要将光标设置为指针(让用户知道他们可以点击事物),并且您还需要设置一个点击事件,如下所示:

   plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        location.href = this.options.url;
                    }
                }
            }
        }
    },

您的 series > data 中的每个元素现在还应该包含一个“url”键值对,如下所示:

series: [{
    data: [{
        y: 29.9,
        url: 'http://bing.com/search?q=foo'
    }, { ... // more data sets
于 2013-05-26T23:11:58.190 回答
0

两件事情:

1)在您的系列对象中,我看不到任何选项网址。

2)路径应该是e.point.series.options.url;

工作代码:

        {
            name: 'Browsers',
            url: "http://www.google.com", // add url 1)
            data: browserData,
            size: '60%',
            point: {
                events: {
                    click: function(e) {
                        location.href = e.point.series.options.url; //proper path 2)
                        e.preventDefault();
                    }
                }
            },
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }

和 jsfiddle: http: //jsfiddle.net/sxskW/6/(由于 X-Frame-Options:SAMEORIGIN 而不会重定向)。

于 2013-05-27T12:51:33.130 回答