Как сделать график градиентом?

Question

[anriko]

<canvas id="myChart<?=$counter_chart?>" width="440" height="230"></canvas>
 			    <script>
                  
                  function myChart(){
                var ctx = document.getElementById('myChart<?=$counter_chart?>').getContext('2d');
                var gradient = ctx.createLinearGradient(20,0, 220,0);

                // Добавление трёх контрольных точек
                gradient.addColorStop(0, 'green');
                gradient.addColorStop(.5, 'cyan');
                gradient.addColorStop(1, 'green');

                // Установка стиля заливки и отрисовка прямоугольника градиента
                ctx.fillStyle = gradient;
                ctx.fillRect(20, 20, 200, 100);
                    
                    
                var marketing = [<?=$arFields['PROPERTY_NORMA_CONVERNTIONAL_1_VALUE']?>, <?=$arFields['PROPERTY_NORMA_CONVERNTIONAL_2_VALUE']?>];
                var amount = [<?=$arFields['PROPERTY_NORMA_CONVERNTIONAL_1_VALUE']?>, <?=$arFields['PROPERTY_NORMA_CONVERNTIONAL_2_VALUE']?>];
                var marketing2 = [<?=$arFields['PROPERTY_NORMA_IFM_1_VALUE']?>, <?=$arFields['PROPERTY_NORMA_IFM_2_VALUE']?>];
                var amount2 = [<?=$arFields['PROPERTY_NORMA_IFM_1_VALUE']?>, <?=$arFields['PROPERTY_NORMA_IFM_2_VALUE']?>];
                // 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: <? echo json_encode($arProperties['POINTS']["DESCRIPTION"]);?>,
                        datasets: [{
                            label: 'мкмоль/л',
                            data: <?echo  json_encode($arProperties['POINTS']["VALUE"]);?>,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 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: {
                        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>

Comments

[twobomb]

www.chartjs.org/docs/latest/samples/advanced/radial-gradient.html

[anriko]

twobomb,
а что не так с моим кодом тогда?

var gradient = ctx.createLinearGradient(20,0, 220,0);

                // Добавление трёх контрольных точек
                gradient.addColorStop(0, 'green');
                gradient.addColorStop(.5, 'cyan');
                gradient.addColorStop(1, 'green');

                // Установка стиля заливки и отрисовка прямоугольника градиента
                ctx.fillStyle = gradient;
                ctx.fillRect(20, 20, 200, 100);

[twobomb]

anriko, ну ваш код работает
Ну если график рисуется средствами сторонней библиотеки, то на ней и нужно настраивать

[anriko]

twobomb, на графике так не получается график выше с этим кодом и на нем нет градиента

[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');
                    var gradient = ctx.createLinearGradient(20,0, 220,0);
                // Добавление трёх контрольных точек
                gradient.addColorStop(0, 'green');
                gradient.addColorStop(.5, 'cyan');
                gradient.addColorStop(1, 'green');
                // Установка стиля заливки и отрисовка прямоугольника градиента
                ctx.fillStyle = gradient;
                    
                var marketing = [20, 37];
                var amount = [20, 37];
                var marketing2 = [30, 25];
                var amount2 = [30, 25];
                // 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: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 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: {
                        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>

[anriko]

получилось, только по линиям не получается

var gradient = ctx.createLinearGradient(0, 230, 0, 0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.25, 'green');
gradient.addColorStop(0.25, 'yellow');
gradient.addColorStop(0.50, 'yellow');
gradient.addColorStop(0.50, 'red');
gradient.addColorStop(1, 'red');