Chart.js。值范围很大。最小值不可用

Question

我使用Chart.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）

提前致谢

Answer 1

ability to click and hover over on each Bar

不幸的是，条形图没有等效的 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 中减去它）

Fiddle - https://jsfiddle.net/etLfr9ka/

Please all ideas how to display them on one chart

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

另一种选择是选择一个支持对数刻度的框架或一个允许您将 y 刻度分成多个部分的框架 - 但是在我看来，这不是一个好主意。

Chart.js。值范围很大。最小值不可用

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

javascript

math

chart.js