如何使用chart.js

时间:2019-02-23 11:56:35

标签: javascript jquery charts

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

当前图表: Current Chart Behaviour

图表需要用作Need line like drawn here from the start of the chart

是否可以从开始到此在图表上画一条线?也许某些起点属性或图表上的隐藏x轴属性可以实现这一目标?

还可以通过任何可行的方法在Y轴上的“极端”点之前从顶部移除该空间吗?

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

1 个答案:

答案 0 :(得分:1)

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

中查看示例

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