Угловой 5 сброс диаграммы JS бар в том же компоненте - PullRequest
Новая
       7

Угловой 5 сброс диаграммы JS бар в том же компоненте

0 голосов
/ 07 июня 2018

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

моя диаграмма выглядит так: in ngAfterinit (): 

    for (let rate of this.product.product_ratings) {
      this.sum += rate.rating;
      this.ratingArr.push(rate.rating);
      let n = this.product.product_ratings.length;
      let nn = this.sum / n;
      this.product.peopleCount = n;
      this.product.between = Math.round(nn * 10) / 10;
    }


   new Chart(<HTMLCanvasElement>document.getElementById("user-rev-chart"), {
      type: 'horizontalBar',
      data: {
        labels: ["5 star", "4 star", "3 star", "2 star", "1 star"],
        datasets: [
          {
            fill: true,
            label: false,
            backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
            data: [this.fivestar, this.fourstar, this.threestar, this.twostar, this.onestar]
          }
        ]
      },
      options: {
        maintainAspectRatio: false,
        responsive: false,
        legend: {display: false},
        title: {
          display: false,
          text: ''
        },
        scales:
          {
            yAxes: [{
              // barPercentage: 0.4,
              barThickness: 20,
              barPercentage: .5,
              categoryPercentage: .2,
              isFixedWidth: true,
              //Number - Pixel width of the bar
              barWidth: 20,
              gridLines: {
                display: false
              },
              ticks: {
                min: 0,
                stepSize: 1,
                fixedStepSize: 1,
              }
            }],
            xAxes: [{
              display: false,
              gridLines: {
                display: false
              },
              ticks: {
                min: 0,
                stepSize: 1,
                fixedStepSize: 1,
              }
            }],
          }
      }
    });

ngInit (): 

  ngOnInit() {

    if (this.isActive() && this.auth.isAuthenticated()) {
      this.changeCaptcha();
    }
    this.all = null;
    this.cur = null;
    this.onestar = null;
    this.twostar = null;
    this.threestar = null;
    this.fourstar = null;
    this.fivestar = null;
    this.ratingArr = [];


  }

1 Ответ

0 голосов
/ 07 июня 2018

Вы должны получить 2-й контекст.

Шаблон: 

<div class="chart-container" fxFlex="80">
      <canvas id="currency"></canvas>
</div>

Компонент: 

  private displayCurrencyGraph(currencyEntry: CurrencyEntry) {
    const currencyCanvas: any = document.getElementById('currency');
    const currencyCanvasContext = currencyCanvas.getContext('2d');
    ChartBuilder.buildChartLine(currencyCanvasContext,this.data );
  }

ChartBuilder: 

static buildChartLine(canvasContext, data){
    new Chart(canvasContext, {
      type: 'line',
      data: {data} 
}

Из вашего кода вам не хватает getContext('2d') вызовс вашего холста.Если вы добавите это, оно должно работать.

Вы должны вызвать метод destroy () для контекста, а затем назначить новый набор данных.

...