Chart.js自定义属性对象柱状图问题：切换区域无法显示全三类数据

现象描述 #

图表仅显示单个类别（如C类）的柱状图，切换区域后依然只能显示单个类别，无法同时展示A、B、C三类数据。

核心问题分析 #

• 数据结构不统一：每个类别（A/B/C）的区域数据使用了不同的键名（a/b/c），导致Chart.js的parsing.yAxisKey无法同时匹配三类数据。
• 函数赋值覆盖：cambioarea函数中连续三次赋值yAxisKey，最终只会保留最后一次的赋值结果（calzada.${areax}.c），因此始终只显示C类数据。

修复方案 #

完整修改代码

<div class="chartBox">
  <canvas id="myChart"></canvas>
  <select id="areax" class="sel_area" onchange="cambioarea()">                       
    <option value="area_1">Area 1</option>                             
    <option value="area_2">Area 2</option>
    <option value="area_3">Area 3</option>
    <option value="area_4">Area 4</option>
    <option value="area_5">Area 5</option>
    <option value="area_6">Area 6</option>
    <option value="area_7">Area 7</option>
    <option value="area_8">Area 8</option>
    <option value="area_9">Area 9</option>
    <option value="area_10">Area 10</option>
  </select>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 原始数据源
const dataSource = [
  {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}
  }}
];

// 根据区域键提取对应A/B/C的数值
function getAreaData(areaKey) {
  return dataSource.map(item => {
    const valueKey = item.id.toLowerCase();
    return item.calzada[areaKey][valueKey];
  });
}

// 图表配置
const config = {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Kms. por area',
      data: getAreaData('area_1'),
      backgroundColor: ['#ff0127', '#ffffff', '#db6adb'],
      borderColor: ['black', 'black', 'black'],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

// 初始化图表
const myChart = new Chart(document.getElementById('myChart'), config);

// 区域切换函数
function cambioarea(){
  const areax = document.getElementById('areax').value;
  // 更新数据集的数值
  myChart.data.datasets[0].data = getAreaData(areax);
  // 刷新图表
  myChart.update();
}
</script>

关键修改说明 #

• 移除parsing配置：放弃依赖yAxisKey单键匹配的方式，改用手动提取数据的逻辑，解决无法同时展示多类数据的问题。
• 新增getAreaData工具函数：根据选中的区域，批量提取A/B/C三类的数值，返回符合Chart.js要求的数组格式。
• 优化切换逻辑：直接更新图表数据集的data数组，再调用update()刷新图表，这是Chart.js官方推荐的动态更新数据的方式。

内容的提问来源于stack exchange，提问作者ANDY AGUIRRE