nvd3可点击轴标签

时间:2015-09-09 03:32:40

标签: javascript d3.js svg nvd3.js

我有一个简单的堆叠水平条形图。我希望y轴标签是可点击的,即;我希望它们像<a href='...'>标签一样工作。

以下是我的图表的摘要。点击文字&#39; site1&#39;,&#39; site2&#39;等后,我希望它将用户带到底层网址。

我该怎么做?

enter image description here

以下是支持图表的一些示例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;
});

0 个答案:

没有答案