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

【问题标题】：Chartjs linechart with only one point - how to centerChartjs 折线图只有一点 - 如何居中
【发布时间】：2021-07-04 17:26:41
【问题描述】：

我有一个 chartjs 折线图来显示不同产品在一系列日期的销售情况。用户可以选择一个日期范围（例如从 2015 年 12 月 1 日到 2015 年 12 月 10 日）来查看每天的销售额，这很好。

但是如果用户只选择了一天（例如从 2015-12-01 到 2015-12-01），他会得到正确的图表，但看起来不太好：

如您所见，这些点都固定在 y 轴上。有没有可能在图表上将点居中？

它应该是这样的：

【问题讨论】：

标签： chart.js

【解决方案1】：

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

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

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

【讨论】：

这似乎是没有任何技巧的最正确答案
不适用于 ChartJS v2 或 v3

【解决方案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/

【讨论】：

我认为您不需要空值和空格。你只需要确保标签和数据是数组，即 [value]

【解决方案3】：

想添加到上面的答案，并说我使用这个在时间序列散点图上得到了类似的效果：

if (values.length === 1) {
        const arrCopy = Object.assign({}, values);
        values.unshift({x: arrCopy[0].x - 86400000, y: null});
        values.push({x: arrCopy[0].x + 2 * 86400000, y: null});
}

然而，这只处理一个点。要为多个点添加功能，我做了以下操作：

const whether = (array) => {
    const len = array.length;
    let isSame = false;
    for (let i = 1; i < len; i++) {
        if (array[0].x - array[i].x >= 43200000) {
            isSame = false;
            break;
        } else {
            isSame = true;
        }
    }
    return isSame;
}
if (values.length === 1 || whether(arr[0])) {
        const arrCopy = Object.assign({}, values);
        values.unshift({x: arrCopy[0].x - 86400000, y: null});
        values.push({x: arrCopy[0].x + 2 * 86400000, y: null});
}

您可能会注意到我只是在 x 值中减去/添加一天（以毫秒为单位）。老实说，我只是在 moment.js 上度过了最糟糕的时期，然后放弃了哈哈。希望这对其他人有帮助！

注意：我的代码在时间上的容差为 43200000，即 12 小时。如果你的运气比我今晚好，你可以使用 moment.js 来比较天数:)

【讨论】：

【解决方案4】：

针对您的具体问题，尝试修改 options->scales->xAxes 选项，如下所示：

options: {
      title: {
         display: true,
         text: 'mytitle1'
      },
      scales: {
         xAxes: [{
            type: 'linear',
            ticks: {
               suggestedMin: 0,
               suggestedMax: (11.12*2),
               stepSize: 1 //interval between ticks
            }
         }],

【讨论】：