Назначение эффекта свечения / тени на 2 графика на одном экране - PullRequest
Новая
       10

Назначение эффекта свечения / тени на 2 графика на одном экране

0 голосов
/ 04 октября 2019

У меня есть 2 диаграммы на одной странице, и я пытаюсь добавить эффект свечения на линии диаграммы, используя атрибут shadow, используя обводку. Я хотел бы добавить его в оба графика с разными цветами. Но поскольку штрих применяется к диаграмме глобально, он влияет как на графики, так и не только на один. Я хочу создать 2 метода glowEffect (), один для chart1, а другой для chart2, чтобы я мог соответственно установить цвет. 

HTML Code:

<canvas class="canvas-graph" style="background-color: white" #chart1></canvas>
  &nbsp;&nbsp;
  <canvas class="canvas-graph" style="background-color: white" #chart2></canvas>

JS:

export class StatistikPage implements OnInit {

  @ViewChild('chart1', {static: false}) chart1: ElementRef;
  @ViewChild('chart2', {static: false}) chart2: ElementRef;

glowEffect(){
    let draw = Chart.controllers.line.prototype.draw;   
    Chart.controllers.line.prototype.draw = function() {
      draw.apply(this, arguments);
      let ctx = this.chart.chart.ctx;
      let _stroke = ctx.stroke;
      ctx.stroke = function() {
          ctx.save();
          ctx.shadowColor = '#6ece87';
          ctx.shadowBlur = 5;
          ctx.shadowOffsetX = 0;
          ctx.shadowOffsetY = 4;
          _stroke.apply(this, arguments);
          ctx.restore();
      };
    };
  }
chart1() {
  Chart.defaults.global.legend.display = false;
  this.lines = new Chart(this.chart1.nativeElement, {
    type: 'line',
    data: {
      labels: ['MON', 'DIEN', 'MITT', 'DONN', 'FREI', 'SAM', 'SONN'],
      datasets: [{
        data: [20, 25, 10, 50, 40, 35, 15],
        borderColor: '#6ece87',
        borderWidth: 1,
        fill: false,
        pointBackgroundColor: 'white'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      title: {
        display: true,
        text:'Title',
        fontColor: '#212A49'
      }
    }
  });
  }
  chart2() {
    Chart.defaults.global.legend.display = false;
    this.lines = new Chart(this.chart2.nativeElement, {
      type: 'line',
      data: {
        labels: ['MON', 'DIEN', 'MITT', 'DONN', 'FREI', 'SAM', 'SONN'],
        datasets: [{
          data: [20, 25, 10, 50, 40, 35, 15],
          borderColor: '#009dd9',
          borderWidth: 1,
          fill: false,
          pointBackgroundColor: 'white'
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
        title: {
          display: true,
          text:'chart2',
          fontColor: '#212A49'
        }
      }
    });
}

Графики добавляются с помощью chart.js. Метод gloweffect () добавляет свечение к линиям диаграммы, но я мог установить его только как глобальный метод, который воздействует на обе диаграммы. Я хотел бы сохранить 2 разных эффекта для обоих графиков.

...