如何动态设置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 动态更改此最大值，方法是查找数据中的最大值，并在超过网格线值时将 max 设置为高于该最大值，如下所示...

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

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

Answer 2

在撰写本文时，实际上有一种方法可以在将 y-max 设置为特定最大值后将其重置为动态。您可以通过将 max 设置为

undefined

来实现此目的，如下所示：

chart.axis.max(undefined);

。

这里，有一个可以工作的jsfiddle。

Answer 3

https://c3js.org/reference.html#api-axis-max 这是如何执行此操作的文档。