使用按钮单击

时间:2018-05-01 10:22:03

标签: javascript chart.js

我在使用Chart.js更新图表时遇到问题。 在javascript中使用硬编码数据我在按钮点击事件中将新数据传递到图表函数中,但是一旦图表一旦在图表上方悬停在图表上以查看工具提示数据时跳过这两个实例就会更新。

我添加了一个非常快速的GIF动画,展示了这一点,非常感谢能给予的任何帮助。

Example of issue

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
    });
};

0 个答案:

没有答案