javascript - 单点曲线Chart.js

Question

有没有办法在 Chart.js 中创建带有单个点的直线曲线，如下所示？

我尝试了一些 hacky 修复，例如添加两个额外的点:在 y: 0 处向右添加 1 个点，使曲线的右侧部分向下，然后在 x: 0 处向上添加另一个点，使曲线的右侧部分向下移动。曲线如图所示。它并没有真正起作用，曲线看起来很糟糕并且点显示。

我还尝试将它们放在图形显示区域之外，使用最小值和最大值来保持图形在任一轴上仅可见到 9，但点仍然显示在轴上。

这是我当前拥有的无法运行版本的屏幕截图:

这是我的图形配置代码。我在 Angular 2/Ionic 3 中使用它:

this.data = {
    xLabels: [0,1,2,3,4,5,6,7,8,9, ''],
    yLabels: [0,1,2,3,4,5,6,7,8,9, ''],
    datasets: [{
      label: '',
      data: [{x:-5, y: 7}, this.coords, {x: 9, y: 0}],
      pointBackgroundColor: '#ffffff',
      borderColor: '#ffffff',
      pointStyle: 'rectRot',
      pointRadius: 8,
    }]
  };

  this.options = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    layout: {
      padding: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      }
    },
    scales: {
      yAxes: [{
        position: 'left',
        ticks: {
          fontSize: 14,
          fontColor: '#a6a08f',
          fontFamily: 'Helvetica',
          fontStyle: 'bold',
          beginAtZero: true,
          min: 0,
          max: 10,
          stepSize: 1
        },
        gridLines: {
          color: '#a6a08f',
          drawTicks: true
        }
      }],
      xAxes: [{
        ticks: {
          fontSize: 14,
          fontColor: '#a6a08f',
          fontFamily: 'Helvetica',
          fontStyle: 'bold',
          beginAtZero: true,
          min: 0,
          max: 10,
        },
        gridLines: {
          display: true,
          color: '#a6a08f',
          zeroLineColor: '#a6a08f',
          drawTicks: true
        }
      }]
    }
  }

Answer 1

我的处理方式是错误的。需要三个点才能形成一条曲线。我只想显示线上的一个点，但需要第一个和第三个点来获取曲线。