代码之家  ›  专栏  ›  技术社区  ›  Phil

ChartJS 2.0代码差异需要帮助

  •  0
  • Phil  · 技术社区  · 8 年前

    我在转换下面的代码以使用图表时遇到问题。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();
        });
    });
    

    如果有人能帮我解决这个问题,我将非常感激。非常感谢。

    1 回复  |  直到 8 年前
        1
  •  1
  •   user3407386    8 年前

    对于onclick事件,可以使用var activeSegment=chart.getElementAtEvent(evt);