Как пропустить метки линии в многострочном графике на графике js?

Question

Я пытаюсь создать многострочный график, используя диаграмму js. На оси X у меня есть даты, а на оси Y у меня есть некоторое количество в целых числах. У меня есть две строки: одна для расходов пользователя, другая для дохода. Для дохода у меня есть данные только 2 дат, но с разницей в месяц. Моя вторая точка дохода на графике не в правильную дату, она приходит в следующую дату расходов.

Мои данные выглядят так:

[
  { date: '2020-02-24', type: 'income', amount: 900 },
  { date: '2020-03-20', type: 'expense', amount: 100 },
  { date: '2020-03-20', type: 'expense', amount: 830 },
  { date: '2020-03-21', type: 'expense', amount: 50 },
  { date: '2020-03-22', type: 'expense', amount: 560 },
  { date: '2020-03-24', type: 'expense', amount: 600 }
]

In labels dates of income are 2020-02-24 and 2020-03-24 и rest of the dates are of expenses

Вот мой набор данных:

{
    labels:[ "2020-02-24", "2020-03-20", "2020-03-20", "2020-03-21", "2020-03-22", "2020-03-24" ],
    datasets: [
      {
        label: 'Expenses',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: [ 100, 830, 50, 560 ],
      },
      {
        label: 'Income',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 2,
        data: [ 900, 600 ],
      }
    ]
  };

Answer 1

Вы не должны определять data.labels, потому что они рассматриваются для обоих наборов данных. Вместо этого вы должны определить каждую точку данных индивидуально, используя объект, содержащий свойства x и y.

data: [
  { x: '2020-02-24', y: 900 }, 
  { x: '2020-03-24', y: 600 }
]

В следующем фрагменте исполняемого кода я создаю такие data отдельных наборов данных из вашего базовый массив данных с использованием filter() и map().

const data = [
  { date: '2020-02-24', type: 'income', amount: 900 },
  { date: '2020-03-15', type: 'expense', amount: 100 },
  { date: '2020-03-20', type: 'expense', amount: 830 },
  { date: '2020-03-25', type: 'expense', amount: 50 },
  { date: '2020-03-28', type: 'expense', amount: 560 },
  { date: '2020-03-24', type: 'income', amount: 600 }
];

var worldChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [
      {
        label: 'Expenses',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: data.filter(o => o.type == 'expense').map(o => ({ x: o.date, y: o.amount }))
      },
      {
        label: 'Income',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 2,
        data: data.filter(o => o.type == 'income').map(o => ({ x: o.date, y: o.amount }))
      }
    ]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'        
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>