使用Chart.js基于JSON字典生成柱状图失败的问题排查

你的问题出在数据集的data格式错误：你把Object.values(log)额外包裹了一层数组，导致Chart.js拿到的是二维数组，无法正确匹配X轴的标签。

错误原因 #

Object.values(log)本身会返回一个一维数组（比如log是{'2024-01-01': 3, '2024-01-02': 7}时，返回[3,7]），但你写成了[Object.values(log)]，最终得到的是[[3,7]]这种二维数组，Chart.js无法解析这种格式来生成对应每个X轴标签的柱子。

修正后的代码 #

new Chart("log", {
  type: "bar",
  data: {
    labels: Object.keys(log),
    datasets: [{
      backgroundColor: barColors,
      data: Object.values(log) // 去掉外层的[]
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "Historial de logueo"
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true,
          fontColor:"#8f9092",
        }
      }]
    }
  }
});

验证说明 #

当log包含多个键值对时，Object.keys(log)生成X轴的所有标签，Object.values(log)生成对应位置的Y轴数值，两者一一对应，Chart.js就能正确渲染出每个标签对应的柱子了。之前用Object.values(log)[0]只取第一个值，所以只有单个数据时能显示，现在修正后就能支持任意数量的键值对了。

内容的提问来源于stack exchange，提问作者Agustín Alabarces Varela