Chart.js图表标题显示undefined，使用Object.keys(groupMedia)为标签该如何修复

你看到的undefined是Chart.js的图例项/全局标题缺失配置导致的，和你用Object.keys(groupMedia)生成的X轴坐标标签无关，不需要修改这部分逻辑。

情况1：图例位置显示undefined（每条折线旁边的文本） #

你所有dataset配置中都缺少label属性，这个属性就是控制图例显示文本的，修改两处添加数据集的代码即可：

• 修改汽油数据集添加逻辑（addDataG函数）：

var newDataset = {
  label: '汽油', // 新增这行即可
  backgroundColor: 'rgba(165, 42, 42, 1)',
  borderColor: 'rgba(165, 42, 42, 1)',
  borderWidth: 1,
  data: variacao.checked ? r : Object.values(grupoMedia),
}

• 修改乙醇数据集添加逻辑（addDataE函数）：

var dataset1 = {
  label: '乙醇', // 新增这行即可
  backgroundColor: 'rgba( 30, 144, 255, 1 )',
  borderColor: 'rgba( 30, 144, 255, 1 )',
  borderWidth: 1,
  data: variacao.checked ? r2 : Object.values(grupoMedia),
}

如果需要和数值模式联动，可以动态修改label内容，例如：

label: variacao.checked ? '汽油（变化率%）' : '汽油'

情况2：图表全局标题位置显示undefined #

在初始化Chart实例时补充标题配置即可，修改atualizarGrafico函数中的Chart初始化代码：

myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: Object.keys(grupoMedia),
    datasets: [
      {
        data: Object.values(grupoMedia)
      }
    ]
  },
  // 新增以下配置
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Petrópolis燃油价格历史走势' // 自定义标题内容
      }
    }
  }
});

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