ChartJS带时间刻度的条形图-条形图相互重叠

Question

我试图创建一个ChartJs条形图，其中包含标签上的日期。

图表上的横条相互重叠，不均匀。当删除时间刻度时工作良好，但是，标签没有进行日期排序。标签和数据是动态填充的，因此在呈现之前无法对其进行排序。

下面是示例图像，

而且，如果删除了刻度（xAxis），它将给出正确的输出（但未排序）

例子：https://codepen.io/karthikkbala/pen/QWjVQqb

样本数据：

[ "2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10", ] 
[ 20, 11, 9, 22, 11, 9, ]

Answer 1

您可以在图表配置中省略标签，而是通过包含x和y属性的对象生成数据作为单独的点，如图所示。

const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));

这将产生以下数据。

[
  { "x": "2020-05-13", "y": 20 },
  { "x": "2020-05-11", "y": 11 },
  { "x": "2020-05-12", "y": 9 },
  { "x": "2020-05-14", "y": 22 },
  { "x": "2020-05-09", "y": 11 },
  { "x": "2020-05-10", "y": 9 }
]

xAxis必须定义如下：

xAxes: [{
  offset: true,
  type: 'time',
  time: {
    unit: 'day',   
    source: 'data',
    tooltipFormat: 'MMM DD' 
  }
}],

请在下面查看您的修订代码。

const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));

var chartData = {
  datasets: [{
    label: "All Detections",
    backgroundColor: "#02a499",
    borderColor: "#ffffff",
    borderWidth: 1,
    hoverBackgroundColor: "#02a499",
    hoverBorderColor: "#02a499",
    data: data
  }]
};

new Chart("ChartByDate", {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        offset: true,
        type: 'time',
        time: {
          unit: 'day',   
          source: 'data',
          tooltipFormat: 'MMM DD' 
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="ChartByDate"></canvas>