是否可以仅创建2个值的折线图？ -Chart.js

Question

想象我有以下示例：

var config = {
        type: 'line',
        data: {
            labels: ['1', '2', '3', '4', '5', '6', '7'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                data: [1, 7],
                fill: false,
            }

...

是否可以像在“数据”中那样仅定义第一个和最后一个值来创建线性图？我需要实现这一点，因为起点和终点将发生变化。

Answer 1

您可以使用null在数据中留出空白。要将两个值显示为第一个和最后一个值，您只需要用null填充之间的所有值。然后，您可以使用选项spanGaps:true连接第一个点和最后一个点。

const options = {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'red',
      borderColor: 'red',
      data: [1, null, null, null, null, null, 7],
      fill: false,
    }]
  },
  options: {
    spanGaps: true,
  }
}

const ctx = document.getElementById('chart').getContext('2d');
try {
  new Chart(ctx, options);
} catch (e) {
  // There's a cross origin error happening in the snippet
  //console.log (e)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<canvas id="chart" width="600" height="400"></canvas>