Chart.js仅渲染首个数据且无标签问题排查求助

嘿，我看了你的代码，马上发现问题出在Chart.js的配置结构上啦！这就是为啥图表只显示第一个元素还没标签的原因，我帮你梳理下问题点和修正后的代码：

问题核心 #

你现在把labels放在了和data同级的位置，但Chart.js的规则是：labels必须是data对象的子属性。因为这个配置错误，Chart.js没正确读取到你的标签数组，自然没法把两组数据和对应的地址标签关联起来，才出现了只显示第一个元素的异常。

另外，你做的是bar+line的混合图表，虽然给其中一个dataset指定了type: 'line'，但还有些小细节可以优化，让图表显示更正常。

修正后的完整代码 #

function ShowChart() { 
  var popCanvas = document.getElementById("speedLimitsChart"); 
  console.dir(speeddata); 
  var labels = speeddata.map(function (e) { return e.Adress; }); 
  var speed = speeddata.map(function (e) { return e.Speed; }); 
  var speedlimits = speeddata.map(function (e) { return e.SpeedLimits; }); 
  console.dir(labels); 
  var barChart = new Chart(popCanvas, { 
    type: 'bar', // 基础图表类型设为bar，line类型在单独dataset里指定
    data: { 
      labels: labels, // 重点！把labels移到data对象内部
      datasets: [{ 
        label: 'Speed', 
        data: speed, 
        backgroundColor: '#1E90FF' 
      }, { 
        label: 'Speed Limits', 
        data: speedlimits, 
        backgroundColor: '#B22222',
        borderColor: '#B22222', // line图表必须加边框色，否则线条会看不见
        type: 'line',
        fill: false // 关闭填充，让line图表更清爽
      }]
    },
    // 可选：加个坐标轴配置，让图表更直观
    options: {
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: 'Speed Value'
          }
        },
        x: {
          title: {
            display: true,
            text: 'Address'
          }
        }
      }
    }
  }); 
}

几个关键修正说明 #

1. 调整labels的位置：这是解决当前问题的核心，Chart.js只会读取data.labels作为x轴标签，之前的位置完全不对。
2. 给line数据集加borderColor：你之前只设置了backgroundColor，但line图表是靠边框色来显示线条的，不加的话可能看不到限速的线条。
3. 添加fill: false：默认line图表会填充线条下方的区域，关闭后和bar图表搭配更清晰。

你替换成这段代码后，应该就能正常显示两个地址的标签，以及对应的速度柱状图和限速折线图了。如果还有问题，可以看看控制台有没有报错，或者再确认下speeddata的每个元素是不是都有正确的Adress、Speed、SpeedLimits属性哦～

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