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

我正以错误的方式解决这个问题。制作曲线需要三点。我只想在线上显示一个点，但需要第一个和第三个点来获得曲线。

Answer 2

有趣的是，您可以通过指定负y值来隐藏点：

{
   x: 9,
   y: -1
}

但是你已经尝试了一个负x值，只是默认为0.我不确定这是否有帮助，但是如果你更改了图表中的某些值，你可以通过指定高于该值的值来隐藏两个外部点。第一个点的图表，低于第二个点的图表。

Have a look at this fiddle。你可能想要使用这些值来使它看起来像你需要的那样但它确实隐藏了第一和第三点，同时仍然给你曲线。

只是旁注 - 小数值可以使它更接近轴：

{
    x:9
    y:-0.1
}

单点曲线Chart.js

2 个答案: