Chartjs线图只有一点 - 如何居中

Question

我有一张chartjs折线图,显示了不同产品在一系列日期的销售情况.用户可以选择日期范围(例如从2015-12-01到2015-12-10)来查看每天的销售情况,这很好并且可以正常工作.

但是如果用户只选择一天(范围从例如2015-12-01到2015-12-01),他会得到正确的图表,但看起来不太好:

如您所见,这些点都贴在y轴上.是否有可能将图中的点居中？

这应该是什么样子:

Answer 1

不要使用空白参数对标签和值进行硬编码，而是使用该offset属性。

const options = {
  scales: {
    x: {
      offset: true
    }
  }
}

文档：https : //www.chartjs.org/docs/latest/axes/cartesian/linear.html#common-options-to-all-cartesian-axes

Answer 2

您可以检查标签(或数据)数组的长度,并使用空字符串标签和空值向左和向右添加虚拟不可渲染点,如此

var chartData = {
  labels: ['', "A", ''],
  datasets: [
    {
      fillColor: "rgba(255, 52, 21, 0.2)",
      pointColor: "#da3e2f",
      strokeColor: "#da3e2f",
      data: [null, 20, null]
    },
    {
      fillColor: "rgba(52, 21, 255, 0.2)",
      strokeColor: "#1C57A8",
      pointColor: "#1C57A8",
      data: [null, 30, null]
    },
  ]
}

小提琴 - https://jsfiddle.net/pf24vg16/