javascript - Chart.js 从非 0 的另一个值填充折线图

Question

我正在尝试更改完成蓝色图填充的值，此处为 0。例如，我想将其设置为 5，但对于绿色图，我想将此值保留为 0。

这是我目前的图表:

这是我用来绘制此图的数据:

var data = {
    labels : arrayLabels,
    datasets:[
    {
        label: "CA",
        backgroundColor: "rgba(26,179,148,0.1)",
        borderColor: "rgba(26,179,148,0.7)",
        pointBackgroundColor: "rgba(26,179,148,1)",
        yAxisID: "y-axis-CA",
        data: arrayCA
    },
    {
        label: "Marge",
        backgroundColor: "rgba(46,95,255,0.1)",
        borderColor: "rgba(46,95,255,0.7)",
        pointBackgroundColor: "rgba(46,95,255,1)",
        yAxisID: "y-axis-marge",
        data: arrayMarge,
        // -> here i would like to have something like:
        // fillFrom : 5
    }]};

我使用chart.js 2，我该怎么做？谢谢

Answer 1

据我所知，没有简单的方法。如果您想创建自定义填充，您将需要使用插件或编写大量代码来自定义它。

当我寻找类似的东西时，我遇到了:

Chart JS Fill Between two lines

这并不能完全满足您的需求，但您可以自定义图表以实现它。

如果您创建一个所有数据点均为 5 的数据集，然后使用基本选项使其不可见(0 宽度、不显示数据点等)，则可以在该行和“合并”行之间进行填充。

上一个答案中的 JSFiddle 和代码应该是实现它所需的一切。