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不知道缺少七月和八月：

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

希望这会有所帮助。

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

1 个答案: