Vue Chart.js — могу ли я указать линейному графику значение по умолчанию для отсутствующих данных?

Я предполагаю, что у вас есть какой-то регулярный временной интервал для ваших ярлыков.

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

Надеюсь это поможет.