带有使用自定义属性的对象的 Bar Chart.js - 要显示的问题

Question

我有一组数据，分为 10 个区域。每个区域分为三个类别：A、B 和 C，每个类别都有一组数据。 我的目标是使用 html 和 Chart.js 实现带有选择器的条形图（它可以正常工作），该选择器允许您更改区域，然后在图表中显示这三个类别及其该区域的数据。

我已经阅读了 Chart.Js 文档，但我发现我找不到可视化信息，而且我在互联网上没有看到类似的案例，只有这个，但我以相同的方式遵循步骤，但我不知道未达到结果 (https://www.youtube.com/watch?v=XSONJgrPkhA)。 我的问题是，它仅显示其中一个类别的数据，如果我更改区域，它会显示另一个类别的数据，但不会显示其他类别的数据。

我分享部分代码

<div class="chartBox">
                        <canvas id="myChart" ></canvas>
                    <select id="areax" class= "sel_area" onchange="cambioarea()">                       
                        <option value="area_1">Area 1</options>                             
                        <option value="area_2">Area 2</options>
                        <option value="area_3">Area 3</options>
                        <option value="area_4">Area 4</options>
                        <option value="area_5">Area 5</options>
                        <option value="area_6">Area 6</options>
                        <option value="area_7">Area 7</options>
                        <option value="area_8">Area 8</options>
                        <option value="area_9">Area 9</options>
                        <option value="area_10">Area 10</options>
                    </select>
                    </div>
// setup 
const data = {
        //labels: ['A', 'B', 'C'],    
        datasets: [{
            label: 'Kms. por area',
            //data: [50, 12, 6, 9, 12, 3, 9],
            data: [
            {id: 'A', calzada:
                {
                    area_1: {a:613.810},
                    area_2: {a:600.586},
                    area_3: {a:1091.87}, 
                    area_4: {a:656.29},
                    area_5: {a:866.47},
                    area_6: {a:2262.059},
                    area_7: {a:1055.978},
                    area_8: {a:490.487}, 
                    area_9: {a:763.41},
                    area_10: {a:1099.84},
                }
            },
            {id: 'B', calzada:
                {
                    area_1: {b:11.981},
                    area_2: {b:209.617},
                    area_3: {b:317.616},
                    area_4: {b:106.509},
                    area_5: {b:70.190},
                    area_6: {b:84.109},
                    area_7: {b:18.875},
                    area_8: {b:39.619},
                    area_9: {b:27.899},
                    area_10: {b:50.787},
                }
            },
            {id: 'C', calzada:
                {
                    area_1: {c:534.647},
                    area_2: {c:988.239},
                    area_3: {c:519.770},
                    area_4: {c:672.867},
                    area_5: {c:725.431},
                    area_6: {c:1080.430},
                    area_7: {c:916.132},
                    area_8: {c:1224.730},
                    area_9: {c:1193.990},
                    area_10: {c:211.585},
                }
            }],
            backgroundColor: [
                '#ff0127',
                '#ffffff',
                '#db6adb'
            ],
            borderColor: [
                'black',
                'black',
                'black',
            ],
            borderWidth: 1
        }]
    };

    // config 
    const config = {
        type: 'bar',
        data,             // tambien funciona como:  data:data,
        options: {
            parsing: {
                xAxisKey: 'id',
                yAxisKey: 'calzada.area_1.a'
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    };
          
    // render init block
    const myChart = new Chart(
        document.getElementById('myChart'),
        config
        );
function cambioarea(){
        const areax = document.getElementById('areax').value;
        console.log(areax);
        myChart.config.options.parsing.yAxisKey = `calzada.${areax}.a`;
        myChart.config.options.parsing.yAxisKey = `calzada.${areax}.b`;
        myChart.config.options.parsing.yAxisKey = `calzada.${areax}.c`;
        myChart.update();
    }

事情是这样的：

我认为我的问题出在我的函数 CAMBIOAREA 上。 感谢您提前的帮助

Answer 1

让ChartJS来处理一些数据的显示/隐藏会好很多。

例如，如果您将每个区域放置在数据集中，则可以使用顶部的标签来切换它们。

看这个例子：

const data = {  
    labels: [ 'a','b','c'],
    datasets: [
      {
        label: "area 1",
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        label: "area 2",
        data: [50, 21, 12, 21, 54, 63, 23],
        hidden: true
      }
    ]
};

const config = {
    type: 'bar',
    data,          
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};



// render init block
const myChart = new Chart(
    document.getElementById('myChart'),
    config
);
   

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
<div class="chartBox">
    <canvas id="myChart" ></canvas>
</div>

---

否则，您可以隐藏这些标签进行切换，然后在更改时隐藏/显示集合：

//Hide
chart.getDatasetMeta(1).hidden=true;
chart.update();

//Show
chart.getDatasetMeta(1).hidden=false;
chart.update();