时间戳

首页 > 解决方案 > 删除自定义 Chart Js 工具提示颜色方块

javascript - 删除自定义 Chart Js 工具提示颜色方块

问题描述

我有以下不同月份的数据如下

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: 'Task 1',
        backgroundColor: "rgba(220,220,220,0.5)",
        data: [50, 40, 23, 45, 67, 78, 23]
    }, {
        label: 'Task 2',
        backgroundColor: "rgba(151,187,205,0.5)",
        data: [50, 40, 78, 23, 23, 45, 67]
    }, {
        label: 'Task 3',
        backgroundColor: "rgba(82,154,190,0.5)",
        data: [50, 67, 78, 23, 40, 23, 0]
    }]
};

我想删除总标签 Expected Outcome前面的颜色方块

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Stacked Bar Chart"
        },
        tooltips: {
           intersect : false,
           mode: 'label',
            callbacks: {
                label: function(tooltipItem, data) {

                   var chartLabel = data.datasets[tooltipItem.datasetIndex].label;
                   var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

                   var total = 0;
                   var label = '';                  

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }                     

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += chartLabel + " : $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');                      
                   } else {
                        label += chartLabel + " : $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                      label = [label, " Total : $" + total];
                   }                   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

在这里，我一个接一个地显示标签，最后计算所有三个的总和，但最后一个数据生成的总值设置颜色，我们如何删除总前面的颜色方块？

标签： javascriptchart.js

解决方案

不要在tooltips.callbacks.label函数中包含总计，而是使用tooltips.callbacks.footer函数返回总计行。

请看一下我对类似问题的回答。

推荐阅读