隐藏 x 轴标签但在 chart.js 中显示工具提示

Question

我找到了很多关于如何隐藏每个第 n 个标签但仍然能够在工具提示中显示它的答案。但有一个问题。如果标签很长，那么图表会以某种方式被压扁到画布的顶部。这是合乎逻辑的。但是有没有办法隐藏标签，仍然在工具提示中显示它们，但在计算 y 值时忽略它们？这样就可以从画布上到下画线了？

谢谢你的建议！！

Answer 1

您可以扩展折线图来执行此操作。改编自 Hide labels on x-axis ChartJS（用于条形图），删除了一些不需要的代码。

我们所做的非常简单，我们首先将标签数组设置为空白，允许进行初始化，最后遍历（第一个）数据集的点并将标签设置为原始标签。

Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function(data){
    var originalLabels = data.labels;
    data.labels = data.labels.map(function() { return '' });

    Chart.types.Line.prototype.initialize.apply(this, arguments);
    this.datasets[0].points.forEach(function(bar, i) {
      bar.label = originalLabels[i];
    });
  }
});

即使您有多个数据集，为第一个数据集设置标签就足够了 - 在构建 multiTooltip 时，标签是从第一个数据集中挑选的。

---

小提琴 - http://jsfiddle.net/xjchy2dn/