我有一个简单的堆叠水平条形图。我希望y轴标签是可点击的,即;我希望它们像<a href='...'>
标签一样工作。
以下是我的图表的摘要。点击文字&#39; site1&#39;,&#39; site2&#39;等后,我希望它将用户带到底层网址。
我该怎么做?
以下是支持图表的一些示例JSON(请参阅图表构建代码中的graphData
):
[
{
"key": "Redirect",
"values": [
{
"label": "site1",
"value": 300
},
{
"label": "site2",
"value": 300
},
{
"label": "site3",
"value": 300
},
{
"label": "site4",
"value": 300
},
]
},
{
"key": "Response",
"values": [
{
"label": "site1",
"value": 634.6369999228045
},
{
"label": "site2",
"value": 529.6729999827221
},
{
"label": "site3",
"value": 525.2909999107942
},
{
"label": "site4",
"value": 535.6699998956174
},
]
}
]
代码:
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 50, bottom: 50, left: 100})
.groupSpacing(.1)
.stacked(true)
.showControls(true);
//.showValues(true);
chart.tooltip.enabled();
chart.yAxis.tickFormat(d3.format(',.2f'));
d3.select('#chart svg').datum(graphData).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});