Chart.js如何设置labels值 解决标签竖向、op3数据不渲染问题

labels正确传值规则 #

labels是Chart.js类目轴的核心配置项，直接传入与数据点长度一一对应的一维数组即可，每个数组元素对应X轴上一个刻度的展示内容，基础示例：

new Chart(document.getElementById('chartCtx'), {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7], // 一维数组，每个元素对应一个X轴刻度
    datasets: [
      // 数据集配置，每个dataset的data数组长度需与labels长度完全匹配
    ]
  },
  options: {}
})

对应问题解决方案 #

1. 标签竖向展示问题 #

触发原因及对应解决方法：

• 数组结构不符合要求：如果传入的labels数组是逐字符拆分的单字符集合、或者存在嵌套数组，就会出现单字竖向排列的效果。直接打印待传入的labels变量，调整数组结构为标准一维格式，确保每个数组元素对应一个完整标签值即可。
• X轴刻度自动旋转：标签数量较多时Chart.js会默认旋转X轴标签，当旋转角度为90度时标签就会呈现竖向排列效果。在配置中强制锁定标签旋转角度为0即可：

options: {
  scales: {
    x: {
      ticks: {
        minRotation: 0,
        maxRotation: 0
      }
    }
  }
}

2. value-op3数据集（全值为360.4）未渲染问题 #

按以下优先级排查修复：

• 校验数组长度：确认该数据集的data数组长度与labels数组长度完全一致，长度不匹配时对应数据点不会被渲染。
• 校验Y轴范围：检查Y轴配置的max属性值是否小于360.4，如果Y轴上限设置低于数据值，整条图形会被绘制在画布可视区域外，将Y轴max调整为400及以上即可正常显示。
• 校验样式配置：如果是折线图，检查是否同时设置了borderWidth: 0、pointRadius: 0、fill: false，该配置下折线和数据点会完全透明不可见；如果是柱状图，检查backgroundColor是否设置为全透明值。
• 校验解析规则：如果自定义了parsing解析参数，确认规则配置正确，没有将360.4的数值映射到不存在的数据字段上。

内容的提问来源于stack exchange，提问作者Ryu Hoon Hee