双击C3图表上的事件

时间:2015-09-03 12:37:44

标签: angularjs charts c3.js

我正在使用c3图表,当我点击栏并双击其他内容时,我需要显示工具提示。

即使对于c3也有onclick

 data: {
              columns: [],
              onclick: function(d, i) {
                     //dosth
              },
}

无法找到任何双击资源。 有什么想法吗?

更新 在我的HTML

  <c3-chart config="MyChart"></c3-chart>

  $scope.MyChart= {
    data: {
          columns: [],       
          type: 'bar',
        }
}

      $scope.MyChart.internal.main.selectAll('.' + c3.chart.internal.fn.CLASS.eventRect).on('dblclick', function (d) {
    var $$ = chart.internal;
    $$.main.selectAll('.' + c3.chart.internal.fn.CLASS.circle).each(function (d) {
        if ($$.isWithinShape(this, d)) {
            // event handling
            alert(d.value);
        }
    });
})

有两个问题 1.我得到TypeError:无法读取未定义的属性'main' 2.怀疑这适用于bar,因为它搜索圆圈以启动双击

1 个答案:

答案 0 :(得分:1)

将双击处理程序附加到C3图表

chart是您的图表对象,您可以执行类似

的操作
chart.internal.main.selectAll('.' + c3.chart.internal.fn.CLASS.eventRect).on('dblclick', function (d) {
    var $$ = chart.internal;
    $$.main.selectAll('.' + c3.chart.internal.fn.CLASS.circle).each(function (d) {
        if ($$.isWithinShape(this, d)) {
            // event handling
            alert(d.value);
        }
    });
})

这基本上过滤到事件层元素(c3将其事件处理程序委托给它),即..CLASS.eventRect并附加双击处理程序。

双击时,我们遍历所有点,即..CLASS.circle,并检查点击是否在特定形状内。如果是,我们触发处理程序(this是元素,d是附加数据)

请注意,所有选择器都限定为图表元素(chart.internal.main),以便在同一页面上有多个图表时它可以正常工作。

小提琴 - http://jsfiddle.net/eo2kszt2/