如何使用 Chart.js 绘制起点和点都在 canvas 区域之外的折线图

Question

我目前正在使用 chart.js "2.9.4" 和 "react-chartjs-2 "2.11.1". 我的目标是绘制一个包含只有两个数据点的折线图。这两个数据点都在canvas.

之外

这里附上一张参考图片

请帮助我找到解决此问题的方法。非常感谢您的帮助。

Answer 1

您可以使用 scatter 图表并在 x-axis 上定义 ticks.min 和 ticks.max 选项来限制视图。为了看到该行，您需要在 dataset.

上添加 showLine: true

Consult the Chart.js documentation for further details about tick configuration.

请查看下面的可运行代码片段，看看它是如何工作的。

new Chart('chart', {
  type: 'scatter',
  data: {
    labels: [2018, 2024],
    datasets: [{
      data: [{ x: 2018, y: 10 }, { x: 2024, y: 0 }],
      borderColor: 'rgb(0, 0, 255)',
      showLine: true,
      fill: false
    }],
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          min: 2020,
          max: 2023,
          stepSize: 1
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" width="300" height="200"></canvas>

如何使用 Chart.js 绘制起点和点都在 canvas 区域之外的折线图

How to plot a line chart which has both the start and points outside the canvas area using Chart.js

html

javascript

chart.js

react-chartjs-2