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

问题描述

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

I have a chartjs linechart diagram to show the sales of different products on a range of dates. The user can select a date range (for example from 2015-12-01 to 2015-12-10) to view the sales per day and thats fine and its working.

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

But if the user selects only one day (range from for example 2015-12-01 to 2015-12-01), he gets the correct diagram, but it doesn't look good:

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

As you can see, the points are stick to the y-axis. Is there a possibility, to center the points on the diagram?

它应该是这样的:

推荐答案

您可以检查标签(或数据)数组的长度，并使用空字符串标签和空值在左右添加虚拟不可渲染点，像这样

You can check the length of your labels (or data) arrays and add dummy non-renderable points to the left and right by using empty string labels and null value, like so

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/

这篇关于Chartjs 折线图只有一点 - 如何居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！