Chart.js取消选择后,条形图上的值不会消失

时间:2019-03-26 07:51:33

标签: jquery chart.js

我有一个折线图和一个条形图,其中的值是可见的(我使用了网站上其他帖子中的代码)。

借助Kunal Khivensara的帮助,我解决了在线图形上的问题。但是,我无法在图形栏上集成相同的解决方案。

问题在于,如果我取消选择一个参数,则只会消失该条,而不会消失其值。你能帮助我吗?引荐来源-> https://jsfiddle.net/ds8r2apg/

这是我的代码:

var ctx = document.getElementById("popChart").getContext("2d");
var nomi = [2017,2018,2019];

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: nomi,
        datasets: [{
            label: 'PP PERVENUTI',
            data: [50,30,45],
            backgroundColor: "#8A0808",
            fill: false,
            borderColor: "#8A0808",
            borderWidth: 3
        },
        {
            label: 'PP EVASI',
            data: [60,45,12],
            backgroundColor: "#0B610B",
            fill: false,
            borderColor: "#0B610B",
            borderWidth: 3
        },
        {
            label: 'PI PERVENUTI',
            data: [20,25,35],
            backgroundColor: "#8A0886",
            fill: false,
            borderColor: "#8A0886",
            borderWidth: 3
        },
        {
            label: 'PI EVASI',
            data: [10,20,30],
            backgroundColor: "#0404B4",
            fill: false,
            borderColor: "#0404B4",
            borderWidth: 3
        }       
        ]
    },
    options: {

    legend: {
        display : true,
        position : "bottom"
    },
    hover: {
        animationDuration: 0
    },
    animation: {
        duration: 1,
        onComplete: function () {
            var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset, i)
            {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    },

}

});

0 个答案:

没有答案