chart.js 相关问题

使用“ng2-charts”：“^1.6.0”。我有一个像这样的折线图：使用“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 + ')', '[Avg Value: ' + Math.round(data.reduce((a, b) => a + b, 0) / data.length * 100) / 100 + '%Min Value: ' + Math.round(Math.min.apply(null, data) * 100) / 100 + '%Max Value: ' + Math.round(Math.max.apply(null, data) * 100) / 100 + '%]']; } 我需要从图表数据更新图表标题，因为我想要图表标题中的平均值、最大值和最小值。但看起来图表选项是在数据绑定到图表之前分配的。数据出来后可以设置标题吗？很抱歉回复晚了，但在经历了同样的问题并解决之后，我决定无论如何都要发布答案，以便下一个来到此线程的人可以解决它。问题在于，显然只有对数据和标签进行的更改才会被考虑重新绘制图表。因此，如果您需要更改表格的其他方面，您可能需要使用： this.chart.refresh(); 不要忘记引用视图： @ViewChild(BaseChartDirective) chart; 这将根据您的最新更改重新绘制图表。 2022 年刚刚遇到同样的问题，接受的答案对我不起作用。以防万一现在有人像我一样再次研究这个问题，我将留下最终对我有用的解决方法。在 Angular 组件中拥有此属性 chartOptions!: ChartOptions; 然后在 ngOnInit() 中我有 // define chart options this.chartOptions = this.getChartOptions(); 然后在数据可用时返回数据 getChartOptions(): ChartOptions { return { responsive: true, title: { display: true, text: this.getChartTitle() }, }; } 2023 年注意事项如果它仍然不起作用，我们需要通过 plugins 设置它，而不是使用 ng2-charts 的 ChartOptions 对象。查看更多信息https://www.chartjs.org/docs/latest/configuration/title.html 简而言之，我们可以使用另一个这样的函数： GetChartOptions(newTitle: string): ChartConfiguration['options'] { return { plugins: { title: { display: true, text: newTitle, font: { size: 20 } } } }; } 我们通过更改画布 html 上的属性映射来更改（参见 [options]="lineChartOptions"，单向映射） <canvas baseChart class="chart" [id]="'line'" [data]="lineChartData" [options]="lineChartOptions" [type]="lineChartType" [legend]="true" ></canvas> 可以通过调用 ChangeTitle() 来完成这些操作，并在该代码中调用 GetChartOptions('newTitle anything aaaa') 来填充单向映射属性 @ViewChild(BaseChartDirective) chart?: BaseChartDirective; public lineChartOptions: ChartConfiguration['options'] = { plugins: { title: { display: true, text: "Chart Line", font: { size: 20 } } } } public ChangeTitle() { this.lineChartOptions = this.GetChartOptions("aaaa"); this.chart?.chart?.update(); // Don't forget to update, if not it won't be refreshed! } 您可以通过用户输入或任何您想要的内容来设置值，并将其放入选项构建器函数中.. 使用 ng2-charts v4.1.1 (chartjs v4.x.x)，render() 功能对我有用： @ViewChild(BaseChartDirective) chart; ... this.chart?.render(); 来自文档这里 Triggers a redraw of all chart elements. Note, this does not update elements for new data. Use .update() in that case.

javascript angular chart.js ng2-charts

回答 3 投票 0

隐藏数据标签chart.js并用粗线绘制/标记x = 0

如何隐藏顶部的数据标签并用与数据集不同的颜色绘制一条线性线（在背景中）x = 0（用红色水平线显示）新图表（canvas_id，{ 类型：'li...

javascript chart.js

回答 1 投票 0

Chart.js 自定义工具提示标签

我有一个折线图，其中当前设置了数据，但我需要为光标位于该点上方时显示的框制作自定义标签。我收到一个带有 3 个键的对象发送到我的图表，每个键......

javascript chart.js

回答 1 投票 0

chart.js 相关问题

最新问题