ng 2-charts:如何在typescript中动态设置图表的标题

w6lpcovy  于 2022-11-23  发布在  Chart.js
关注(0)|答案(2)|浏览(153)

使用“ng2图表”:“^1.6.0”。我有一个折线图,如下所示:

<canvas baseChart
              [datasets]="lineChartData"
              [labels]="lineChartLabels"
              [options]="lineChartOptions"
              [colors]="lineChartColors"
              [legend]="lineChartLegend"
              [chartType]="lineChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </div>

我有一个变量,它设置的选项如下:

this.lineChartOptions = {
      responsive: true,
      animation: {
        duration: 5000, // general animation time
      },
      scales: {
        xAxes: [{
          type: 'time',
          distribution: 'series'
        }]
      },
      title: {
        display: true,
        text: this.getChartTitle()
      }
    }
    this.lineChartOptions.update();
  }

下面是getChartTitle方法。

getChartTitle(): string[] {
   const data = this.chartData.map(point => point.y); // grab only points within the visible range

return ['ChartName',
        '(Data for ' + this.startDate + ' to ' + this.endDate + ')',
        '[<b>Avg Value:</b> ' + Math.round(data.reduce((a, b) => a + b, 0) / data.length * 100) / 100 +
        '%<b>Min Value:</b> ' + Math.round(Math.min.apply(null, data) * 100) / 100 +
        '%<b>Max Value:</b> ' + Math.round(Math.max.apply(null, data) * 100) / 100 + '%]'];
      }

我需要根据图表数据更新图表标题,因为我希望图表标题中包含平均值、最大值和最小值。
但看起来图表选项是在数据绑定到图表之前分配的。是否可以在数据可用后设置标题?

cunj1qz1

cunj1qz11#

很抱歉晚的回应,但在经历了同样的问题和解决它,我决定张贴答案无论如何,使下一个来这个线程可以解决它。
问题是,显然只有对数据和标签所做的更改才会被考虑重绘图表。因此,如果需要更改表的其他方面,可能需要用途:

this.chart.refresh();

不要忘记引用视图:

@ViewChild(BaseChartDirective) chart;

这将使用最新更改重新绘制图表。

ktecyv1j

ktecyv1j2#

我在2022年也遇到过同样的问题,而我所接受的答案对我来说并不适用。为了防止有人像我一样再次研究这个问题,我将离开最终对我有效的解决方案。
在Angular 组件中具有此属性

chartOptions!: ChartOptions;

然后在ngOnInit()中我有

// define chart options
this.chartOptions = this.getChartOptions();

然后在数据可用时返回数据

getChartOptions(): ChartOptions {
    return {
      responsive: true,
      title: {
        display: true,
        text: this.getChartTitle()
      },
    };
  }

相关问题