0

Как сделать такой бэкграунд ?Первый раз работаю с chartjs

Chart

 var start = 300;
        var labelArr = [];
        while (start >= 0) {
            labelArr.unshift(start--);
        }
        var ctx = document.getElementById('chart').getContext('2d');
        // This chart would show a line only for the third dataset
        let chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'First dataset',
                    data: [2.0, 1.9, 1.8, 1.7,1.6,1.5,1.5,1.5,1.5,1.5,0.7,0.6,0.5,0.4,0.3,0],
                    borderColor: "#F5BBAB",
                    backgroundColor: 'red',

                },
                    {
                        label: 'second dataset',
                        data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#F3CEAA",
                    },
                    {
                        label: 'third dataset',
                        data: [1.7, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#FEF6CF",
                    },
                    {
                        label: 'fourth dataset',
                        data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#E2E3E0",
                    },
                    {
                        label: 'fifth dataset',
                        data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#E2E3E0",
                    },
                    {
                        label: 'sixth dataset',
                        data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#D6B7A2",
                    },
                    {
                        label: 'seventh dataset',
                        data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#E2E7EB",
                    },
                    {
                        label: 'eighth dataset',
                        data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#E0E2F9",
                    },
                    {
                        label: 'ninth dataset',
                        data: [1.8, 1.7, 1.6, 1.5,1.4,1.3,1,0],
                        borderColor: "#B2B7CA",

                    },
                ],
                labels: labelArr
            },
            options: {
                elements: {
                    point:{
                        radius: 0
                    }
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 2,
                            stepSize: 0.2,
                        }
                    }],
                }
            },
            // tooltips: {
            //     mode: false,
            //     callbacks: {
            //         title: function() {},
            //         label: function() {}
            //     }
            // }
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
 <canvas id="chart"></canvas>

1 ответ 1

0

Используйте параметр fill со значением 'end' для графиков сверху

 var start = 300;
        var labelArr = [];
        while (start >= 0) {
            labelArr.unshift(start--);
        }
        var ctx = document.getElementById('chart').getContext('2d');
        // This chart would show a line only for the third dataset
        let chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'dataset1',
                    data: [2.0, 1.9, 1.8, 1.7,1.6,1.5,1.5,1.5,1.5,1.5],
                    borderColor: "#F5BBAB",
                    fill: 'end',
                    backgroundColor: 'red',

                },{
                    label: 'dataset2',
                    data: [1.6, 1.5,1.4,1.3,1.3,1.3,1.3,1.3,1.3,1.3],
                    borderColor: "#BBF5AB",
                    fill: 'end',
                    backgroundColor: 'green',

                },
                ],
                labels: labelArr
            },
            options: {
                elements: {
                    point:{
                        radius: 0
                    }
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 2,
                            stepSize: 0.2,
                        }
                    }],
                }
            },
            // tooltips: {
            //     mode: false,
            //     callbacks: {
            //         title: function() {},
            //         label: function() {}
            //     }
            // }
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
 <canvas id="chart"></canvas>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.