нарисовать два градиента на одном холсте линейного графика - PullRequest
Новая
       14

нарисовать два градиента на одном холсте линейного графика

0 голосов
/ 06 февраля 2020

У меня есть линейная диаграмма с двумя линиями на холсте, мне нужно заполнить область под линией градиентом. для одного он работает нормально, но для двух линий градиент не работает. Я реализовал следующий код для моего компонента диаграммы 


ngAfterViewInit() {
   var ctx = this.mycanvas.nativeElement.getContext('2d');

       var gradient = ctx.createLinearGradient(0, 0, 0, 200);
       gradient.addColorStop(0, "rgba(128, 182, 244, 1)");
       gradient.addColorStop(1, "rgba(128, 182, 244, 0)");

       var gradient2 = ctx.createLinearGradient(0, 0, 0, 300);
       gradient2.addColorStop(0, "rgba(157, 96, 251, 1)");
       gradient2.addColorStop(1, "rgba(157, 96, 251, 0)");

       this.lineChartColors = [
         {
           borderColor: '#4da1ff',
           backgroundColor: gradient,
         },
         {
           borderColor: '#9d60fb',
           backgroundColor: gradient2,
         }
       ];
}

, и мой html равен 


    <canvas #mycanvas baseChart  
                [datasets]="chartData.datasets"
                [labels]="chartData.labels"
                [options]="chartOptions"
                [colors]="lineChartColors"
                [legend]="legend"
                [chartType]="'line'"
                [plugins]="lineChartPlugins">
    </canvas>

вывод равен приведенный график

Но Мне нужно достичь этого ожидаемого графика

кто-то, пожалуйста, помогите мне, где я делаю неправильно, чтобы использовать два градиентных цвета на одном элементе холста

...