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

Question

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

因此，y轴网格线可以称为"Maximum"

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

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

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

Answer 1

遗憾的是，C3 没有 "set Y axis to maximum of yvalue or largest data" 的设置。但是，假设您已经使用如下方法添加了一条网格线。然后，您可以使用此处显示的设置来设置 y 轴填充和最大值：

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

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

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

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

Answer 2

在撰写本文时，实际上有一种方法可以在将 y-max 设置为特定最大值后将其重置为动态。为此，您可以将最大值设置为 undefined，如下所示：chart.axis.max(undefined);.

在这里，有一个工作jsfiddle。

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

How do I dynamically set the scale of y-axis for c3 chart?

javascript

charts

graph

c3.js