Vue Chart.js -- 我可以为折线图提供缺失数据的默认值吗？

Question

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

Answer 1

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

在 Chart.js 中，数据集通过数组中的索引映射到标签。 Chart.js 并不知道数据中的 "gaps" 在哪里。另外 Chart.js 不知道您的标签使用的日期间隔。我认为 Chart.js 中的这种设计选择是出于性能原因。

这会按预期工作：

data: [1,0,0,10]
labels: ['June','July','Aug', 'Sept']

这里 Chart.js 假设前两个值是 6 月和 7 月的值：

data: [1,10]
labels: ['June','July','Aug','Sept']

这里Chart.js不知道七月和八月不见了：

data: [1,10]
labels: ['June','Sept']

如果你 API returns 这样的数据：

{'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,
});

您可以在后端使用类似的东西来填充空 dates/months 等

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

希望对您有所帮助。

Vue Chart.js -- 我可以为折线图提供缺失数据的默认值吗？

Vue Chart.js -- can I give a line chart a default value for missing data?

javascript

vue.js

chart.js

vue-chartjs