reactjs - 如何在 chartjs 中跳过多线图中一行的标签？

Question

我正在尝试使用 chartjs 创建多线图。在 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 }
]

在标签中的收入日期是 2020-02-24 和 2020-03-24 和其余日期都是费用

这是我的数据集:

{
    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 }
]

在下面的可运行代码片段中，我使用 filter() 从您的基本数据数组中构建单个数据集的此类 data和 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>