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

Question

我正在使用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，因为它搜索圆圈以启动双击

Answer 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/

双击C3图表上的事件

1 个答案:

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