Question

我有一个Stacked％Column Highchart，没有数据集上的超链接可以正常工作，但我需要链接到图表中的另一个页面，如果它是标准柱形图，我就没有问题（我已经有一个）。但我似乎无法弄清楚为什么我在链接上收到一个未定义的错误。

我已经四处寻找一个有效的例子但是却找不到一个匹配堆积百分比列。

我已经设置了一个小提琴来指示我的目标，任何帮助都会得到赞赏。

 $(function () {
 $('#container').highcharts({
   chart: {
     type: 'column'
   },
   title: {
     text: 'Space Overview'
   },
   xAxis: {
     categories: ['a', 'b', 'c', 'd']
   },
   yAxis: {
     min: 0,
     title: {
       text: 'Total Space (%)'
     }
   },
   tooltip: {
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
     shared: true
   },
   plotOptions: {
     column: {
       stacking: 'percent'
     },
     series: {
       cursor: 'pointer',
       point: {
         events: {
           click: function() {
             location.href = this.options.url;
           }
         }
       }
     }
   },
   subtitle: {
     text: '+ Items relate to items in the dispay cabinets.',
     align: 'left',
     x: 10
   },
   series: [{
     name: 'Free',
     data: [1498, 1123, 556, 1176],
     url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
   }, {
     name: 'Used',
     data: [1234,233,23,759],
     url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
   }]
 });

http://jsfiddle.net/Mooglekins/qv8z5a2o/

Answer 1

这是一个很好的问题！我做了一些挖掘，并认为我找到了一个很好的解决方案。

首先，我需要更新您在系列中定义自定义值的方式。要在events中捕获某些值，我在每个数据点中移动了url属性。现在，每个点都有y值和新的url值。

（注意：我在这里使用了虚拟网址，因为我无法连接到您在网站外提供的网址。）

series: [{
    name: 'Free',
    data: [
        { y: 1498, url: 'http://www.google.com' },
        { y: 1123, url: 'http://www.yahoo.com' },
        { y: 556, url: 'http://www.bing.com' },
        { y: 1176, url: 'http://www.msn.com' }
    ]
    }, {
        // second series here
    }
]

接下来，我更新了您的events电话。现在我们已将url属性移动到每个点，我们可以将该值称为point.url（就像使用y时point.y值一样。）

我在这里做的是使用window.open与window.location。这对您的用户来说是一次更好的体验，因此他们不会忽视图表。如果你愿意，请保留。

plotOptions: {
    column: {
        stacking: 'percent'
    },
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function (event) {
                    window.open(event.point.url);
                }
            }
        }
    }
}

以下是您对这些更改的更新提示：http://jsfiddle.net/brightmatrix/qv8z5a2o/5/

我希望这有帮助！

Highcharts Stacked Percentage Column Hyperlink

1 个答案: