javascript - 如何动态设置 c3 图表的 y 轴比例？

Question

我正在制作一个包含分组数据的 c3 图表，我想要一个显示最大值的 y 轴网格线，分组数据的总和不应超过该最大值。

因此，y轴网格线可以称为“最大”

我知道如何制作网格，但它并不总是显示，因为分组数据可能远低于网格值。但我希望网格始终显示。

我查看了 y 轴的填充，但它使用像素并且很难准确。

是否可以将 y 轴设置为显示比 y 轴网格线大 5 个值？

Answer 1

不幸的是，C3 没有“将 Y 轴设置为 y 值的最大值或最大数据”的设置。但是，假设您已经使用如下方法添加了一条网格线。然后，您可以使用此处显示的设置来设置 y 轴填充和最大值:

grid: {
    y: {
        lines: [{ value: 20 }], 
    }
},
axis: {
    y: {
        padding: {top:5, bottom,0},
        max: 20
    }
}

在这种情况下，我将最大值设置为与网格线值相同，并使用填充在其上方创建一个小空间。这将处理您的数据低于网格线的情况。但是，如果您的数据超过(网格线+填充)总数，则图表将不会增长以容纳该数据，因为最大设置是固定的。因此，如果您的数据大于最大值，您需要使用 javascript 动态更改此最大值，方法是找到数据中的最大值并设置最大值，如果它超过您的网格线值，就像这样......

if(highValue > gridlineValue)
  chart.axis.max(highValue);
else
  chart.axis.max(gridlineValue);

我刚刚注意到您的数据永远不会超过网格线，因此您可以使用此答案的第一部分。我把剩下的留在这里，以防其他人想要一个更动态的解决方案。请注意，如果您想将最大值显式设置为高于网格线的值，也可以只使用最大值而无需填充。