如何使用chart.js在没有绘图点的图表上绘制一条线答案

【问题标题】：How to Draw a line on chart without a plot point using chart.js如何使用chart.js在没有绘图点的图表上绘制一条线
【发布时间】：2019-07-17 09:19:00
【问题描述】：

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

当前图表行为：

需要从图表的开头画一条线：

这可以在图表上从开始到那一点画一条线吗？也许一些起点属性或图表上隐藏的 x 轴属性来实现这一点？

另外，是否有任何可能的方法可以在 Y 轴上的“极端”点之前从顶部移除该空间？

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

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

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

这是一种 hack，但您可以在数据中附加一个额外的点并更新其样式以使其隐藏，请参阅我们的小提琴 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);

【讨论】：

是的，但它需要一个起始数据点来从头开始画一条线，如您在示例中所见，但我不想放置一个起点，因为它没有实际数据在数据库中。