Angularでのチャートjsの更新に問題があります。私はそれにngrxストアを使用しています。
セレクタサブスクライバ(ngOnInitで実行)で、チャートデータを更新してみました。
this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
.subscribe(el => {
el.sessions.forEach(item => {
this.datasetsSessions[0].data.Push(+item);
});
});
そして私のチャートデータ:
datasetsSessions: ChartDataSets[] = [{
label: 'Sessions',
data: [],
fill: false
}];
チャートの登録:
private _registerCustomChartJSPlugin(): void {
(window as any).Chart.plugins.register({
afterDatasetsDraw: (chart, easing): any => {
if (!chart.options.plugins.xLabelsOnTop
|| (chart.options.plugins.xLabelsOnTop && chart.options.plugins.xLabelsOnTop.active === false)) {
return;
}
const ctx = chart.ctx;
chart.data.datasets.forEach((dataset, i): any => {
const meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach((element, index): any => {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
const fontSize = 13;
const fontStyle = 'normal';
const fontFamily = 'Roboto, Helvetica Neue, Arial';
ctx.font = (window as any).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
const dataString = dataset.data[index].toString() + 'k';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const padding = 15;
const startY = 24;
const position = element.tooltipPosition();
ctx.fillText(dataString, position.x, startY);
ctx.save();
ctx.beginPath();
ctx.setLineDash([5, 3]);
ctx.moveTo(position.x, startY + padding);
ctx.lineTo(position.x, position.y - padding);
ctx.strokeStyle = 'rgba(255,255,255,0.12)';
ctx.stroke();
ctx.restore();
});
}
});
}
});
}
そして、それをコンストラクタで呼び出します。
Chart.update()を実行する必要があることはわかっています。しかし、それでもチャートが未定義であるなどのエラーが発生します。
同じコンポーネントにチャートを登録していると仮定します。まず、カスタムチャートへの参照を保持する必要があります。あなたのコンポーネントでこれをあなたのコンポーネントクラスに追加してください
customChartInstance : Chart;
次に、afterDatasetsDraw
にthis.customChartInstance=chart
を追加します
次に、サブスクリプションに追加します
this.chart.update();