时间戳

首页 > 解决方案 > 是否可以将重复的标签（及其数据）合并到 Chart Js 中的一列中？

javascript - 是否可以将重复的标签（及其数据）合并到 Chart Js 中的一列中？

问题描述

例如，如果我有用于标签的数组 ['05/Feb/2019', '05/Feb/2019', '05/Feb/2019', '01/Feb/2019'] 和数组 ['2' , '5', '7', '4'] 为它们各自的值。

是否可以仅显示所有元素 '05/Feb/2019' 的一列，并在此列中总结它们的值？

图表 JS 代码

myChart = new Chart(document.getElementById("canvas"),{
    "type":temp.type,
    "data":{
        "labels":column_a,
        "datasets":[{
            "label":label_b,
            "data":column_b,
            "spanGaps": true,
            "fill":false,//true for charts like radar and polar area
            "backgroundColor":["rgba(255, 99, 132, 0.4)","rgba(255, 159, 64, 0.4)","rgba(255, 205, 86, 0.4)","rgba(75, 192, 192, 0.4)","rgba(54, 162, 235, 0.4)","rgba(153, 102, 255, 0.4)","rgba(201, 203, 207, 0.4)"],
            "borderWidth":1
            }
            ]},
            "options":{
                tooltips: {
                    callbacks: {
                        label: (tooltipItem, myChart) => {
                            const realValue = myChart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            //const customValue = realValue.toFixed(2).replace(".", ",") + '%';
                            const customValue = realValue.toFixed(2).replace(".", ",");
                            const label = myChart.labels[tooltipItem.index] + ':';
                            return label + customValue;
                            }
                        }
                    },
                "scales":{
                    "yAxes":[{
                        "gridLines":{display:false},
                        "ticks":{
                            "suggestedMin":0,
                            "max":max_value_1
                        }}]}
                        }});
window.myChart = myChart

标签： javascriptarrayschartschart.js

解决方案

你可以为此使用reduce。愿这对你有帮助！

 var label = ['05/Feb/2019', '05/Feb/2019', '05/Feb/2019', '01/Feb/2019'];
    var value = ['2', '5', '7', '4'];

    var obj = label.reduce(function(a, b, i) {
        if(!a.hasOwnProperty(b)) {
            a[b] = 0;
        }
        console.log(a);
        a[b] += Number(value[i]);
         return a;
    },{});

    var lab = Object.keys(obj);
    var val = Object.values(obj);

推荐阅读