Question

使用“ ng2-charts”：“ ^ 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 + '%]'];
      }

我需要从图表数据中更新图表标题，因为我想要图表标题中的Avg，Max和Min值。

但是，似乎在将数据绑定到图表之前已分配了图表选项。数据可用后是否可以设置标题？

Answer 1

很抱歉，您的回复很晚，但是在遇到同样的问题并解决之后，我决定无论如何都要发布答案，以便下一个来此线程的人可以解决它。

问题在于，显然只考虑对数据和标签进行更改才能重绘图表。因此，如果您需要更改表的其他方面，则可能要使用：

this.chart.refresh();

别忘了引用视图：

@ViewChild(BaseChartDirective) chart;

这将重新绘制图表并包含您的最新更改。

ng2-charts：如何在打字稿中动态设置图表标题

1 个答案: