@anriko

Как сделать градиент по дилениям в chartjs.org?

609e13c17b7b5783437702.png
<canvas id="myChart2" width="502" height="262" class="chartjs-render-monitor" style="display: block; width: 502px; height: 262px;"></canvas>
<script>
                  function myChart(){
                var ctx = document.getElementById('myChart2').getContext('2d');

//делил на значение полоски на самое большое значение 20/45 и 30/45 медлу ними должен быть желтый
                 var gradient = ctx.createLinearGradient(0, 260, 0, 0);
                        gradient.addColorStop(0, 'green');   
                        gradient.addColorStop(0.375, 'green');
                        gradient.addColorStop(0.375, 'yellow'); 
                        gradient.addColorStop(0.625, 'yellow');
                        gradient.addColorStop(0.625, 'red');
                        gradient.addColorStop(1, 'red');
                   
                var marketing = [20, 37];
                var amount = [20, 37];
                var marketing2 = [25, 30];
                var amount2 = [25, 30];
                // populate 'annotations' array dynamically based on 'marketing'
                var annotations1 = marketing.map(function (date, index) {
                    return {
                        type: 'line',
                        id: 'vline' + index,
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: date,
                        borderColor: '#006F93',
                        borderWidth: 2,
                        label: {
                            enabled: true,
                            position: "center",
                            content: amount[index]
                        }
                      
                    }
                });
              var annotations2 = marketing2.map(function (date, index) {
                    return {
                        type: 'line',
                        id: 'vline' + index+1,
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: date,
                        borderColor: '#00CFD7',
                        borderWidth: 2,
                        label: {
                            enabled: true,
                            position: "center",
                            content: amount2[index]
                        }
                      
                    }
                });
                  var annotations = annotations1.concat(annotations2); 
                      console.log(annotations); 
                  
                    
                    
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ["29-04-21","29-04-20","29-04-17","29-04-16","29-04-15"],
                        datasets: [{
                            label: "мкмоль/л",
                            data: ["5","10 ","20","10","45"],
                            backgroundColor: gradient,
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 2
                        }]
                    },
                    options: {
                        scales: {
                            x: {
                                beginAtZero: true,
                                ticks: {
                                    color: 'red',
                                },
                                grid: {
                                    borderColor: 'red'
                                }
                            },
                            y: {
                                stacked: true,
                                title: {
                                    display: true,
                                    text: 'мкмоль/л',
                                    color: 'red',
                                    ticks: {
                                        color: 'red',
                                    }
                                }
                            }
                        },
                        annotation: {
                            drawTime: 'afterDatasetsDraw',
                            annotations: annotations
                        }
                    }
                });
                    }
                  myChart();
            </script>
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 1
twobomb
@twobomb
Опять вы, непонятно что вы хотите, типа такого?

Ну вообще
градиентом так

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы