javascript - 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 刻度分割成多个部分的框架 - 但在我看来，这将是一个坏主意。