Chart.js 2.8.0折线图Hover点时X轴标签显示错误求助

我来帮你解决这个折线图Hover时工具提示X轴值显示错误的问题～

问题根源 #

你遇到的核心问题是同时使用了全局labels数组和dataset内的对象式（x, y）数据点。在Chart.js 2.8.0中，这种混合配置会导致工具提示错误地通过数据点的索引去匹配labels数组的元素，而不是读取数据点自身携带的x值——这就解释了为什么数据点位置正确，但Hover时总是显示labels的首个值。

两种可行解决方案 #

方案1：移除全局labels数组，配置时间轴（推荐） #

因为你的X轴是日期类型，最规范的做法是使用Chart.js的time轴来解析日期数据，同时移除全局labels数组，让框架直接从数据点的x值读取日期。修改后的完整配置如下：

{
  "data": {
    "datasets": [
      {
        "borderColor": "rgba(74,118,12,1.000)",
        "data": [
          {"x": "2018-01-06", "y": 0.242},
          {"x": "2018-01-07", "y": 0.197},
          {"x": "2018-01-08", "y": 0.15},
          {"x": "2018-01-09", "y": 0.15},
          {"x": "2018-01-10", "y": 0.15},
          {"x": "2018-01-11", "y": 0.137},
          {"x": "2018-01-12", "y": 0.11},
          {"x": "2018-01-13", "y": 0.11},
          {"x": "2018-01-14", "y": 0.21},
          {"x": "2018-01-15", "y": 0.273},
          {"x": "2018-01-16", "y": 0.3},
          {"x": "2018-01-17", "y": 0.237}
        ],
        "label": "onlydoe",
        "fill": false,
        "pointRadius": 5
      }
    ]
  },
  "options": {
    "hover": { "mode": "x" },
    "scales": {
      "xAxes": [
        {
          "type": "time",
          "time": {
            "unit": "day",
            "displayFormats": { "day": "YYYY-MM-DD" }
          },
          "scaleLabel": { "display": true, "labelString": "日期" }
        }
      ]
    }
  },
  "type": "line"
}

这个方案不仅能修复工具提示的问题，还能让Chart.js更智能地处理日期范围、刻度显示等时间轴相关的需求。

方案2：保留labels数组，自定义工具提示回调 #

如果你因为某些原因必须保留全局labels数组，可以通过自定义工具提示的回调函数，强制读取数据点自身的x值来覆盖默认的标签匹配逻辑：

{
  "data": {
    "datasets": [
      // ... 原dataset配置不变
    ],
    "labels": [ "2018-01-05", "2018-01-06", "2018-01-07", "2018-01-08", "2018-01-09", "2018-01-10", "2018-01-11", "2018-01-12", "2018-01-13", "2018-01-14", "2018-01-15", "2018-01-16", "2018-01-17" ]
  },
  "options": {
    "hover": { "mode": "x" },
    "tooltips": {
      "callbacks": {
        "title": function(tooltipItems) {
          // 直接返回当前数据点的x值，忽略labels数组的匹配
          return tooltipItems[0].raw.x;
        }
      }
    }
  },
  "type": "line"
}

验证效果 #

修改配置后，Hover数据点时，工具提示就会正确显示对应点的x轴日期值（比如2018-01-06），而不是错误的labels首个值了。

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