График js Плагины работают для всех компонентов - PullRequest
Новая
       48

График js Плагины работают для всех компонентов

0 голосов
/ 26 мая 2020

Не понимаю, почему мой фон работает на каждой диаграмме в проекте. Можно ли настроить разные градиенты для разных графиков? Я новичок в Angular и диаграмме js, надеюсь, вы мне поможете. Если нет возможности создать собственный градиент, пожалуйста, помогите, как это сделать другим способом. Заранее спасибо 

ngOnInit(): void {
    this.calculateChartOptions();
    this.calculateChartLabels();
    this.calculateData();
  }

  private calculateChartOptions() {
    const chartPlugin = {
      id: 'gradient',
      beforeInit(chartInstance) {

        console.log(chartInstance);
      },
      afterLayout(chart, options) {
        try {
          const scales = chart.scales;

          // create a linear gradient with the dimentions of the scale
          const color = chart.ctx.createLinearGradient(
            scales['x-axis-0'].left,
            scales['y-axis-0'].bottom,
            scales['x-axis-0'].left,
            scales['y-axis-0'].top
          );
          // add gradients stops
          color.addColorStop(0, 'rgba(0, 0, 0, 0)');
          color.addColorStop(0.25, 'rgba(238, 57, 0, 0.2)');
          // color.addColorStop(0.5, 'orange');
          // color.addColorStop(0.75, 'yellow');
          color.addColorStop(1, 'rgba(238, 57, 0, 0.7)');
          // changes the background color option
          chart.data.datasets[0].backgroundColor = color;
        } catch (e) {
          console.error(e);
        }
      }
    };
    Chart.pluginService.register(chartPlugin);
    this.barChartOptions = {
      responsive: true,
      plugins: {
        gradient: true
      },
      scales: { xAxes: [{
          gridLines: {
            display: false,
            drawBorder: false
          }
        }], yAxes: [{
          gridLines: {
            display: false,
            drawBorder: false
          }
        }] },
      title: {
        text: this.title,
        display: true,
        fontSize: 20,
        fontColor: GLOBAL_STYLE.textColor
      }
    };
  }
...