4

悬停图形的一部分（donught）后，我需要进行回调。我怎样才能做到这一点？从理论上讲，Chart.js 不提供回调，所以这是一个问题 :)

我当前的代码：

var visitorsChart = [
            {
                value: 60,
                color:'#3e89dc'
            },
            {
                value: 40,
                color:'#88c600'
            }
        ]

        var visitorsChartOptions = {
            percentageInnerCutout: 70
        }

        var renderVisitorsChart = new Chart(document.getElementById("visitors-chart").getContext("2d"), {tooltips: {position: 'bottom left', background: 'rgba(255,255,255,0)', fontFamily: 'Open Sans', fontSize: '40px', fontWeight: '700', labelTemplate:'<%=value%>'}, border: {width:0}, showShadow: false}).Doughnut(visitorsChart, visitorsChartOptions);
4

2 回答 2

0

Charts.JS 确实有一种方法可以根据画布上发生的事件获取有关图表的信息。

http://www.chartjs.org/docs/#doughnut-pie-chart-prototype-methods

从文档中：

在您的 Chart 实例上调用 getSegmentsAtEvent(event) 并传递事件或 jQuery 事件的参数，将返回位于该事件相同位置的段元素。

canvas.onclick = function(evt){
    var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
    // => activePoints is an array of segments on the canvas that are at the same position as the click event.
};

此功能对于实现基于 DOM 的工具提示或触发应用程序中的自定义行为可能很有用。

为悬停函数编写一个回调函数将是微不足道的，该函数访问图表中可能需要的信息。 

$("#visitors-chart").mouseover(function (evt) {
    var info = renderVisitorsChart.getSegmentsAtEvent(evt.originalEvent);
    console.log(info);
});
于 2015-03-02T06:00:22.410 回答
0

这是一种方法：

jQuery(window).load(function () {
    var doughnutChartData = [
        {
            value: 30,
            color: '#F7464A'
        },
        {
            value: 50,
            color: '#46BFBD'
        },
        // ...
    ];

    function showDoughnutChart() {
        var ctx = document.getElementById('doughnutChartCanvas').getContext('2d');
        var theChart = new Chart(ctx).Doughnut(doughnutChartData, {animation: Modernizr.canvas});

        // --- Part needed
        var helpers = Chart.helpers;

        helpers.bindEvents(theChart, ['mousemove', 'touchstart', 'touchmove', 'mouseout'], function (evt) {
            callback(theChart, evt);
        });
        // --- End part needed
    }

    var callback = function (theChart, evt) {
        if ((evt.type === 'mouseout')) {
            console.log('mouse out');
            return;
        }
        var activeSegments = theChart.getSegmentsAtEvent(evt);
        if (!activeSegments.length) return;

        console.log('mousemove', activeSegments[0])
    };

    $('#doughnutChart').appear(function () {
        $(this).css({opacity: 1});
        setTimeout(showDoughnutChart, 300);
    }, {accX: 0, accY: -155}, 'easeInCubic');
});
于 2018-04-05T09:27:15.817 回答