如何在NVD3图表上使用回调

时间:2016-09-09 19:02:01

标签: nvd3.js

我一直在使用NVD3,但已决定添加一些点击事件。我找到了一个使用水平条形图的例子。

     vm.qcoptions = {
                chart: {
                    type: 'multiBarHorizontalChart',
                    //type: 'discreteBarChart',
                    height: 450,
                    margin: {
                        top: 20,
                        right: 20,
                        bottom: 50,
                        left: 55
                    },
                    x: function (d) { return d.label; },
                    y: function (d) { return d.value + (1e-10); },
                    showValues: true,
                    valueFormat: function (d) {
                        return d3.format(',.4f')(d);
                    },
                    duration: 500,
                    xAxis: {
                        axisLabel: ''
                    },
                    yAxis: {
                        axisLabel: '',
                        axisLabelDistance: -10
                    },
                    callback: function (chart) {
                        chart.multibar.dispatch.on('elementClick', function (e) {
                            console.log('elementClick in callback', e.data);
                        });

                    }
                }
            };

上面的示例在使用multiBarHorizo​​natChart时有效,但是当我切换到discreteBarChart时,它会抛出此错误“无法在此行读取未定义的属性'dispatch'

     chart.multibar.dispatch.on('elementClick', function (e) {

我试图检查图表并确定我应该用什么代替chart.multibar作为条形图,但我很难过。任何人都可以对此有所了解吗?

1 个答案:

答案 0 :(得分:1)

您现在指的是离散条形图。您需要在回调函数中反映出来,如下所示:

 chart.discretebar.dispatch.on('elementClick', function (e) {
      console.log('elementClick in callback', e.data);
  });

我建议您始终参考此page,并选择扩展单选按钮以查看相应的属性名称。