backgroundColor в chart js

107
15 января 2022, 16:30

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

 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>

Answer 1

Используйте параметр 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>

READ ALSO
вызвать функцию кнопкой на клавиатуре

вызвать функцию кнопкой на клавиатуре

Работает! Хочу, чтобы при нажатии CTRL, запускалась функция playlistRefresh();

199
Помощь в коде для реализации функции Dark Theme на сайте

Помощь в коде для реализации функции Dark Theme на сайте

на странице моего сайта реализована функция "dark theme", но при перезагрузке все возвращается и поэтому нужна помощь, чтобы реализовать данную...

141
вычисление ряда суммы числа слагаемых

вычисление ряда суммы числа слагаемых

Вот задание: для всех значений X, задаваемых параметрами из набора: начальное значение А, конечное значение В, шаг Dx, количество шагов N x, ограничение...

156