javascript - 如何使用 Chart.js 在没有绘图点的图表上绘制一条线

Question

我正在使用chart.js折线图。我可以正确使用图表，但如果我只有一个绘图点，那么图表不会创建从开始到该点的一条线。我想从图表的开头到单个绘图点绘制一条线，而不在第一天放置绘图点，因为我们的数据库中没有该数据。

当前图表行为:

需要一条从图表开始处绘制的线:

是否可以在图表上从起点到该点绘制一条线？也许图表上的一些起点属性或隐藏的 x 轴属性可以实现此目的？

此外，有什么可能的方法可以删除 Y 轴上“极端”点之前顶部的空间吗？

我对此进行了艰苦的研究，多次阅读了文档，但无法实现。

Answer 1

您是否尝试过将填充设置为 false 的面积图？在此处查看示例 https://www.chartjs.org/samples/latest/charts/area/line-boundaries.html

这是一种黑客，但您可以在数据上附加一个额外的点并更新其样式以使其隐藏，请参阅我们的 fiddle https://jsfiddle.net/hpdr5jf1/

相关代码

var options = {
  type: 'line',
  data: {
    labels: ["", "Actual Data"],
    datasets: [
        {
          label: 'Data Point',
          data: [12, 12],
        pointRadius: [0],
        pointHitRadius: [0],
        borderWidth: 1,
        fill: false,
        borderColor: 'red'
        }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, options);