Question

我正在尝试使用Chart.js填充折线图中两行之间的区域。像这样：

已经有一个答案here，它解释了如何扩展chartjs来做到这一点。但是我知道这个功能现在是V2中的原生（来自this thread on the github issues page），问题是我无法找到引用此文档的文档。

在doc中是否有关于此的部分？有谁知道如何使用此功能？

谢谢！

Answer 1

确保导入2.6.0版本：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

然后按照此处所述的规则进行操作：http://www.chartjs.org/docs/latest/charts/area.html

以下是一个示例，以及它的外观：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My two lines with colour between them</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
   </head>
    <body>
        <canvas id="mychart" width="300" height="200"></canvas>
        <script>
            var ctx = document.getElementById('mychart').getContext('2d'); //get the context (canvas)

            var config = {              //configure the chart
                type: 'line',
                data: {
                    labels: [1, 2, 3, 4],
                    datasets: [{
                        label: "Min",
                        backgroundColor: 'rgba(55, 173, 221,  0.6)',
                        borderColor: 'rgba(55, 173, 221, 1.0)',
                        fill: false,  //no fill here
                        data: [5, 5, 3, 2]
                    },
                    {
                        label: "Max",
                        backgroundColor: 'rgba(55, 173, 221, 0.6)',
                        borderColor: 'rgba(55, 173, 221, 1.0)',
                        fill: '-1', //fill until previous dataset
                        data: [8, 7, 6, 5]
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    spanGaps: false,
                    elements: {
                        line: {
                            tension: 0.000001
                        }
                    },
                    plugins: {
                        filler: {
                            propagate: false
                        }
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                autoSkip: false
                            }
                        }]
                    }
                }
            };
            var chart = new Chart(ctx, config);
        </script>
    </body>
</html>

Answer 2

这是一个小插件，可以在任意两个数据集行之间进行着色。

https://stackoverflow.com/a/41733045/852977

Answer 3

将数据集的 fill 属性设置为 +1 会将背景色从此行设置为数据集中的下一行。

datasets: [{
        label: 'Systolic Guideline',
        data: [],
        fill: '+1',
        borderColor: '#FFC108',
        backgroundColor: 'rgba(255,193,8,0.2)'
      },
      {
        label: 'Diastolic Guideline',
        data: [],
        fill: true,
        borderColor: '#FFC108',
        backgroundColor: 'rgba(0,0,0,0)'
      }]

查看此：https://www.chartjs.org/samples/latest/charts/area/line-datasets.html

两行之间的填充区域 - Chart.js v2

3 个答案: