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

Question

我正在制作一个具有分组数据的c3图表，并且我希望有一个显示最大值的y轴网格线，该分组数据的总和不应超过。

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

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

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

是否有办法仅将y轴设置为比y轴网格线大5个值？

Answer 1

不幸的是，C3没有“将Y轴设置为yvalue的最大值或最大数据”的设置。 但是，假设您已使用以下方法添加了网格线。 然后，您可以使用此处显示的设置来设置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，然后将其重置为动态。 您可以通过将max设置为undefined ，例如： chart.axis.max(undefined); 。

在这里，有一个工作的jsfiddle 。