chartjs-不显示所有x轴数据点，而是在工具提示中显示所有内容

Question

我正在使用带有2条线的chartjs折线图。我有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标签，该点将返回undefined。您必须从标签数组中获取正确的标签。

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

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