javascript - chart.js 在通过按钮单击修改的图表之间跳过的问题

Question

我在使用 Chart.js 更新图表时遇到问题。在 javascript 中使用硬编码数据，我在按钮单击事件上将新数据传递到图表函数中，但是一旦图表更新，当将鼠标悬停在图表上以查看工具提示数据时，它似乎在 2 个实例之间跳过。

我添加了一个非常快速的动画 gif 来演示这一点，如果能提供任何帮助，我将不胜感激。

var overview2017 = {jan:[236,40], feb:[301,75]};
// default view for charts
overview(overview2017.jan);
function buttonclass(v){
    var arr = [bJan,bFeb,bMar,bApr,bMay,bJun,bJul,bAug,bSep,bOct,bNov,bDec];
    for (var i = 0; i <= 11; i++) {
        arr[i].classList.remove("selected");
    }
    arr[v].classList.add("selected");
}

bJan.addEventListener("click", function(){
    buttonclass(0);
    overview(overview2017.jan);
    clientactivity(clientactivities.janLbls,clientactivities.janData);
    // oprft(chartdata);
});

bFeb.addEventListener("click", function(){
    buttonclass(1);
    overview(overview2017.feb);
    clientactivity(clientactivities.febLbls,clientactivities.febData);
});

图表脚本

function overview(rftdata) {

    var data = {
        labels: ["Activities"],
        datasets: [{
            label: "RFT Acvtivities",
            backgroundColor: WLTYellow,
            data: [rftdata[0]]
            },{
            label: "Non RFT",
            backgroundColor: "rgba(255, 0, 0, 0.6)",
            data: [rftdata[1]]
        }]
    };

    var option = {
        title: {
            display: true,
            text: "Total monthly activities"
        },
        responsive: false,
        tooltips: {
            mode: "index",
            intersect: false,
            callbacks: {
                beforeBody: function(tooltipItems, data) {
                    return "RFT %: ";
                },
                // Use the footer callback to display the sum of the items showing in the tooltip
                footer: function(tooltipItems, data) {
                    var sum = 0;
                    tooltipItems.forEach(function(tooltipItem) {
                        sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    });
                return "Total Activities: " + sum;
                },
            },
            footerFontStyle: "normal"
        },
        scales: {
            yAxes: [{
                stacked: true,
                gridLines: {
                    display: true,
                    color: WLTLightGrey
                }
            }],
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false
                }
            }]
        }
    };

    Chart.Bar("chart_0", {
        options: option,
        data: data
    });
};

标签： javascriptchart.js