【问题标题】:c3 js bar chart - setting a minimum bar heightc3 js条形图-设置最小条形高度
【发布时间】:2016-08-23 13:22:49
【问题描述】:

我有一张 Y 值差异很大 (2 - 10000) 的图表。不幸的是,这导致标尺下端的条只有几个像素高,因此不可见/不可交互。有什么办法可以设置条的最小高度?我知道在纯 d3 中,如果需要,您可以稍微修改一下域。

【问题讨论】:

    标签: d3.js c3.js


    【解决方案1】:

    对数是一种非线性变换,有助于将小值保持在很小,将非常大的值保持为相对非常小。

    因此,如果以某种方式应用对数刻度,您应该能够在 c3 图表中看到 3 和 30000。

    但请务必告知用户使用了对数刻度,并且视觉上 500 可能看起来是高度 5 的 2 倍(如果绘制在图表中)。

    c3.js 不通过配置支持对数刻度,因此您需要自己将数据转换为对数刻度(预处理)并将其提供给线性刻度 c3.js 图表(c3 中的默认刻度)。

    已经很少有用户要求c3开发者提供插件d3 log、power等尺度到c3图表的方式了。

    https://github.com/c3js/c3/issues/252

    但您现在可以尝试上述方法(将数据预处理为对数刻度)。

    示例:-

    ln(5000) = 8.517

    ln(500) = 6.214

    ln(50) = 3.912

    ln(5) = 1.609

    从上面的示例可以看出,如果在 y 轴上使用对数刻度,则 5000 和 5 可以在同一张图表中看到。

    【讨论】:

    • 虽然这会按要求显示条形图,但它会转换基础数据,这会降低图表的用处。有没有办法保留数据的实际值(至少出于标记目的),并以某种方式改变比例?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-12
    相关资源
    最近更新 更多