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

Question

[anriko]

<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>

Answer 1

[twobomb]

Опять вы, непонятно что вы хотите, типа такого?

Ну вообще

градиентом так

Comments

[anriko]

twobomb, по делениям графика получилось сделать градиент ,а вот по ориентировочным линиям нет линиям , по ним и нужно сделать
проблема в том что графики циклом формируются и линии ориентира беруться из админки
на значении линии ориентира допустим 35 делю на самую большое деление по шкале Y , но градиент не совпадает с линией ориентира

<script>
                  function myChart(){
                var ctx = document.getElementById('myChart2').getContext('2d');
           /*
                 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,
                        yMin: date,
          				yMax: date,
                        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,
                        yMin: date,
          				yMax: date,
                        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: 'rgba(255, 99, 132, 0.2)',
                            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: {
                     datasets:{
                        	line:{
                          	backgroundColor:function(context){
                  debugger;
                 
                       /* 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');*/
                            		let ctx = context.chart.ctx;
                         			let gradient = ctx.createLinearGradient(0, context.chart.scales.y.bottom || 0,0, -context.chart.scales.y.paddingTop || 0,0);
                              gradient.addColorStop(0, 'green');   
                        gradient.addColorStop(0.44444444444444, 'green');
                        gradient.addColorStop(0.44444444444444, 'yellow'); 
                        gradient.addColorStop(0.66666666666667, 'yellow');
                        gradient.addColorStop(0.66666666666667, 'red');
                        gradient.addColorStop(1, 'red');
                                return gradient;
                            },
                            fill:true
                          }
                        },
                        scales: {
                            x: {
                                beginAtZero: true,
                                ticks: {
                                    color: 'red',
                                },
                                grid: {
                                    borderColor: 'red'
                                }
                            },
                            y: {
                                stacked: true,
                                title: {
                                    display: true,
                                    text: 'мкмоль/л',
                                    color: 'red',
                                    ticks: {
                                        color: 'red',
                                    }
                                }
                            }
                        },
                           plugins: {
                        annotation: {
                            drawTime: 'afterDatasetsDraw',
                            annotations: annotations
                        }}
                    }
                });
                    }
                  myChart();
           
            </script>