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

Hide x-axis labels but show tooltips in chart.js

本文关键字：js 显示 工具提示 标签 隐藏      更新时间：2023-09-26

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

谢谢你的任何建议！！

您可以扩展折线图来执行此操作。改编自 x 轴 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];
    });
  }
});
即使

有多个数据集，只需为第一个数据集设置标签即可 - 构建多工具提示时，将从第一个数据集中选取标签。

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

相关文章：