javascript - Vue Chart.js——我可以为折线图指定缺失数据的默认值吗？

Question

我正在使用 Vue.js 创建折线图，但传递给 renderChart() 的数据存在间隙。到目前为止，我在文档中找不到任何内容，但我仍然很好奇——有没有办法用默认值来填补这些空白？在这种情况下我会使用零，但如果它是可配置的那就太酷了。或者我最好的选择是在将数据传递给 renderChart() 之前用虚拟值回填数据？

Answer 1

我假设您的标签有某种固定的时间间隔。

在 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;
  }
}

希望这有帮助。