我正在使用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,因为它搜索圆圈以启动双击
答案 0 :(得分:1)
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
),以便在同一页面上有多个图表时它可以正常工作。