chartjs -不显示所有x轴数据点，但在工具提示中显示所有数据点

Question

我使用的是带有2条线的图表js折线图。我有7个x轴数据点。我只想显示第一个、第二个和最后一个数据点。但我想在工具提示中显示每个数据点。目前，我只在 x 轴标签中列出 1、2 和 7，因此工具提示在 2 上正确显示，但在其他区域当然什么都没有。那么有没有办法不在x轴上显示特定的数据点（但在代码中仍然有用于工具提示的数据）？（另外，这是一个非常简化的例子，说明我正在尝试做什么）

labels: ['1', '2', '','', ,, '7'],

谢谢。

Answer 1

您应该从1到7正确标记数据，并在回调函数中过滤xAxis标签。

scales: {
  xAxes: [{
    ticks: {
      beginAtZero: true,
      callback: function(value, index, values) {
        if (index === 0 || index === 1 || index === count - 1) { // count = yourNumberOfDataValues
          return value
        }
      }
    },
    gridLines: {
      display: false
    },
  }]
},

默认情况下，工具提示使用点的 xAxis 标签，当没有 xAxis 标签时，该标签将返回未定义的点。您必须从标签数组中获取正确的标签。

tooltips: {
    callbacks: {
      title: function(tooltipItem, data) {
        return sData.label[tooltipItem[0].index] // sData.label is your array with all data labels
      }
    }
  }

此 JSBin 中的完整代码和示例。