图表.js. 大范围内的值.最小值不可用

Chart.js. Values in a big range. The smallest values are not available

本文关键字：最小值 js 范围内 图表      更新时间：2023-09-26

我使用图表.js（http://www.chartjs.org）使用条形图显示不同单位的流量使用情况。如果我的使用范围很大（1 个单位 2.5GB，2 个单位 2.5MB，3 个单位 2.5kB，4 个单位 0B），则当将它们带到一个值时，最小值不可用（我无法将鼠标悬停在它们上面或单击它们），例如 GB （2.5,0.0024,2.38E-6,...,0） 或 MB （2560,2.5,0.0024,...,0）。请所有想法如何在一个图表上显示它们以保持比例以及单击和悬停在每个条形上的能力（甚至 0）

提前致谢

能够单击并将鼠标悬停在每个栏上

不幸的是，条形没有等效的 pointHitDetectionRadius。但是您可以覆盖 Chart.Rectangle 的 inRange 函数，以提供更多的垂直检测范围。

Chart.Rectangle.prototype.inRange = function (chartX, chartY) {
    return (chartX >= this.x - this.width / 2 && chartX <= this.x + this.width / 2) && (chartY >= this.y && chartY <= (this.base + 5));
};

我已经将垂直区域从 x 轴向下扩展了 5 个单位，但您也可以将其更改为轴上方（只需从 this.y 中减去它）

小提琴 - https://jsfiddle.net/etLfr9ka/

请所有想法如何在一张图表上显示它们

只要您不将 barShowStroke 设置为 false，您就会看到即使是 0 个值的笔画。

另一种方法是选择一个支持对数刻度的框架，或者一个允许您将 y 刻度分成多个部分的框架 - 但是 IMO 这将是一个坏主意。

相关文章：