javascript - Highcharts 堆积百分比列超链接

Question

我有一个堆积百分比柱形图，数据集上没有超链接时效果很好，但是我需要链接到图表中的另一页，如果它是标准柱形图，我就不会有问题(我已经有一个) )。但我似乎无法弄清楚为什么我在链接上收到未定义的错误。

我已经四处寻找一个可行的示例，但未能找到与堆叠百分比列匹配的示例。

我已经设置了一个 fiddle 来指示我要做什么，任何帮助表示赞赏。

 $(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

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

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

(注意:我在这里使用了虚拟 URL，因为我无法连接到您在网站外部提供的 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
    }
]

接下来，我更新了您的事件调用。现在我们已经将 url 属性移至每个点，我们可以将该值称为 point.url (就像您可以将 y使用 point.y 的值)。

我在这里还使用了 window.open 与 window.location。这将为您的用户带来更好的体验，这样他们就不会忽 View 表。如果您愿意，请保留此内容。

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

这是您对这些更改的更新:http://jsfiddle.net/brightmatrix/qv8z5a2o/5/

希望这会有所帮助!