我在转换下面的代码以使用图表时遇到问题。JS2.0。
我的图表对象是使用所需的。。。
var chart = new Chart({...constructor code here...});
我已经找到了如何创建自定义工具提示和自定义图例,但似乎无法找到以下项目。
首先,我在图表本身上绑定了一个点击事件,因此当用户点击它时,它将调用一个自定义函数,传递用户点击的段(饼图的一部分)。在以前的1.0版本的图表中。js,我可以调用下面的代码,它工作得很好。这将允许我查看.label和属性以及段的其他属性。
// Pass the segment of the pie chart the user clicks into myCustomFunction()
$('#chartDiv').click(function(evt) {
var activeSegment = chart.getSegmentsAtEvent(evt);
myCustomFunction(activeSegment);
}).css('cursor','pointer');
另一件我无法理解的事情是,我想在我的自定义图例项中添加一个mouseenter和mouseleve事件。当用户将鼠标悬停在图例项上时,将弹出该段的正确工具提示。当鼠标离开时,工具提示关闭。下面是我在ChartJS 1.0上使用的代码。
// Tie the legend to the chart tooltips
var helpers = Chart.helpers;
var chartLegend = document.getElementById("chartLegend");
helpers.each(chartLegend.firstChild.childNodes, function(legendNode, index){
helpers.addEvent(legendNode, 'mouseenter', function(){
var activeSegment = chart.segments[index];
activeSegment.save();
activeSegment.fillColor = activeSegment.highlightColor;
chart.showTooltip([activeSegment], true);
activeSegment.restore();
});
helpers.addEvent(legendNode, 'mouseleave', function(){
chart.draw();
});
});
如果有人能帮我解决这个问题,我将非常感激。非常感谢。