我正在使用 Vue.js 创建折线图,但传递给 renderChart()
的数据存在间隙。到目前为止,我在文档中找不到任何内容,但我仍然很好奇——有没有办法用默认值来填补这些空白?在这种情况下我会使用零,但如果它是可配置的那就太酷了。或者我最好的选择是在将数据传递给 renderChart()
之前用虚拟值回填数据?
最佳答案
我假设您的标签有某种固定的时间间隔。
在 Chart.js 中,数据集通过数组中的索引映射到标签。 Chart.js 并不真正知道数据中的“差距”在哪里。此外,Chart.js 不知道标签使用的日期间隔。我认为 Chart.js 中的这种设计选择是出于性能原因。
这将按预期工作:
data: [1,0,0,10]
labels: ['June','July','Aug', 'Sept']
这里 Chart.js 假设前两个值是六月和七月的:
data: [1,10]
labels: ['June','July','Aug','Sept']
这里 Chart.js 不知道 7 月和 8 月缺失了:
data: [1,10]
labels: ['June','Sept']
如果您的 API 返回这样的数据:
{'June': 1, 'July': 0, 'Aug': 0, 'Sept': 10}
那么你可以这样做:
const labels = Object.keys(response);
const datasets = [];
datasets.push({
label: 'Line 1',
data: labels.map(date => response[date]),
});
this.renderChart({
labels,
datasets,
});
您可以在后端使用类似的内容来填写空日期/月份等。
$interval = \DateInterval::createFromDateString('1 month');
$datePeriod = new \DatePeriod($begin, $interval, $end);
foreach ($datePeriod as $dt) {
if (!isset($data[$dt->format('Y.m')])) {
$data[$dt->format('Y.m')] = 0;
}
}
希望这有帮助。
关于javascript - Vue Chart.js——我可以为折线图指定缺失数据的默认值吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57044721/