Зона заполнения между двумя строками - Chart.js v2

Я пытаюсь заполнить область между двумя линиями в линейном графике, используяChart.js, Как это:

Уже есть ответВот, это объясняет, как расширить chartjs для этого. Но я знаю, что эта функция теперь является родной в V2 (изэта тема на странице GitHub), проблема в том, что я просто не могу найти документацию, ссылающуюся на это.

Есть ли раздел об этом в документе? Кто-нибудь знает, как использовать эту функцию?

Спасибо!

 Miguel Péres16 июн. 2016 г., 21:32
Я собирался предложить расширенное решение, но если у версии 2 у chartjs есть собственный способ сделать это, это должно быть лучше, верно?
 Pedro Estrada16 июн. 2016 г., 20:49
В связанном треде написано, что область заполнена до 0 строки. поэтому, если линия положительна, область заполняется под ней (до линии 0), а если линия отрицательна, она заполняет область над ней (до линии 0). Возможно, вам придется использовать метод расширения, чтобы получить то, что вы хотите.
 Sebastian Popa26 июн. 2016 г., 13:59
Вам удалось воспроизвести это в v2? Родной или расширяющий?
 Miguel Péres28 июн. 2016 г., 20:59
@SebastianPopa Пока нет, сейчас я решаю еще одну проблему, поскольку для меня это не является приоритетом. Но я намерен выяснить, как это сделать изначально. Если я узнаю, я дам обновление, отвечающее на вопрос здесь. Я прошу вас (или кого-либо еще) сделать то же самое :)

Ответы на вопрос(2)

Решение Вопроса

Вот небольшой плагин, который может делать затенение между любыми двумя строками набора данных.

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

Убедитесь, что вы импортировали версию 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>

 Boris Kingma31 июл. 2017 г., 20:14
Конечно, извините, я думал, что это будет понятно с документацией.
 Boris Kingma31 июл. 2017 г., 20:27
Я добавил пример. На самом деле @NisargShah после прочтения исходного вопроса: запрос на самом деле для официальной документации и где это найти, так что ссылка на официальные документы будет ответ ;-)
 Daniel Ordoñez14 июл. 2018 г., 00:32
Это следует отметить как правильный ответ, так как он работает без плагинов.
 Nisarg30 июл. 2017 г., 13:13
Можете ли вы опубликовать некоторый контент, который показывает, как версия 2.6.0 поможет решить проблему? В настоящее время вы добавили ссылку на официальные документы, которая была бы бесполезна, если документы перемещены в другое место.

Ваш ответ на вопрос