为什么我的 ng2-chart 数据没有正确缩放?
Why my ng2-chart data isn't scaled properly?
我有一些数据来自显示在 ng2-chart
中的服务。
这是一个虚拟图表,暂时显示一些虚假数据。
这是HTML的一面:
<canvas
baseChart
[datasets]="[getDataSet(currentTest.results['cpu'])]"
[options]="timeChartOptions"
chartType="line"
>
</canvas>
这里是 timeChartOptions
:
public timeChartOptions: ChartOptions = {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'second',
},
},
],
},
};
这是我格式化数据的方式(我只有一个系列):
public getDataSet(testResult: TestResult): ChartDataSets | undefined {
if (testResult) {
return {
data: testResult.indexes.map((x, index) => ({ x: +x, y: testResult.values[index] })),
label: testResult.name,
};
}
return undefined;
}
}
我认为我转换系列的方式不相关,因为我看到的数据顺序正确,但是当我显示图表时:
- 快速闪烁 100% 正确显示
- 然后数据没有正确的振幅(如果有帮助,我的数据振幅在 1 到 22 之间)。
这是我刷新页面时看到的一个小视频:
https://www.screencast.com/t/LzUdPK4mu
知道我错过了什么吗?
我找到答案了!
问题是我使用了一个函数来计算 ng-charts 的数据集。当我放一个 console.log
时,我意识到这个函数被调用了很多次,所以基本上图表是在循环中获取新数据集,我猜有某种开始动画。
我有一些数据来自显示在 ng2-chart
中的服务。
这是一个虚拟图表,暂时显示一些虚假数据。
这是HTML的一面:
<canvas
baseChart
[datasets]="[getDataSet(currentTest.results['cpu'])]"
[options]="timeChartOptions"
chartType="line"
>
</canvas>
这里是 timeChartOptions
:
public timeChartOptions: ChartOptions = {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'second',
},
},
],
},
};
这是我格式化数据的方式(我只有一个系列):
public getDataSet(testResult: TestResult): ChartDataSets | undefined {
if (testResult) {
return {
data: testResult.indexes.map((x, index) => ({ x: +x, y: testResult.values[index] })),
label: testResult.name,
};
}
return undefined;
}
}
我认为我转换系列的方式不相关,因为我看到的数据顺序正确,但是当我显示图表时:
- 快速闪烁 100% 正确显示
- 然后数据没有正确的振幅(如果有帮助,我的数据振幅在 1 到 22 之间)。
这是我刷新页面时看到的一个小视频: https://www.screencast.com/t/LzUdPK4mu
知道我错过了什么吗?
我找到答案了!
问题是我使用了一个函数来计算 ng-charts 的数据集。当我放一个 console.log
时,我意识到这个函数被调用了很多次,所以基本上图表是在循环中获取新数据集,我猜有某种开始动画。