ChartJS：如何将月线图与日线图居中？答案

【问题标题】：ChartJS: How to center monthly bars against a daily line chart?ChartJS：如何将月线图与日线图居中？
【发布时间】：2020-11-04 12:30:10
【问题描述】：

我正在尝试显示每月总销售额和每日库存水平。通过这种方式，您可以很容易地看到您在特定月份没有任何销售，因为您的库存不足。月销售额是一个条形图，应该位于每个月的中心（在刻度之间）。

为了使其接近中间，我的数据使用每月 15 日作为居中日期。我想知道是否有更好的方法来实现这一点？

可玩的 JSFiddle：https://jsfiddle.net/8Lydhpqc/3/

const dailyStock = [
  { x: "2017-08-02", y: 1 },
  { x: "2017-08-25", y: 3 },
  { x: "2017-09-10", y: 7 },
  { x: "2017-09-28", y: 0 },
  { x: "2017-10-02", y: 3 },
  { x: "2017-10-24", y: 2 },
  { x: "2017-11-01", y: 1 },
  { x: "2017-11-30", y: 0 },
];

//using the 15th of each month to center it
const monthlyTotal = [
  { x: "2017-08-15", y: 1 },
  { x: "2017-09-15", y: 10 },
  { x: "2017-10-15", y: 5 },
  { x: "2017-11-15", y: 5 },
];


var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
    datasets: [
      {
        label: "sales",
        data: data,
        backgroundColor: "green",
        borderColor: "black",
        borderWidth: 1,
        order: 2,
      },
      {
        label: "stock",
        type: "line",
        data: dailyStock,
        backgroundColor: "orange",
        borderColor: "orange",
        fill: false,
        order: 1,
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
          type: "time",
          time: {
            unit: "month",
            displayFormats: {
              month: "MMM",
            },
          },
          distribution: "linear",
          },
      ],
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  },
});

【问题讨论】：

标签： time chart.js bar-chart axes multiple-axes

【解决方案1】：

欢迎来到 Stackoverflow！

似乎有比使用每月 15 号更好的方法。

您需要为栏添加另一个轴，即类别类型轴。同样至关重要的是，您在该轴上也有“偏移量：真”。否则不会居中。

在下面的代码中，我将该类别命名为“bar”，现有的一个为“line”

我还创建了一个小提琴：https://jsfiddle.net/jyf8ax3e/

var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
    datasets: [
      {
        barPercentage: .7,
        xAxisID: "bar",
        label: "sales",
        data: monthlyTotal,
        backgroundColor: "green",
        borderColor: "black",
        borderWidth: 1,
        width: 55,
        order: 2,
      },
      {
        label: "stock",
        type: "line",
        data: dailyStock,
        backgroundColor: "orange",
        borderColor: "orange",
        fill: false,
        order: 1,
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
            id: "line",
          type: "time",
          time: {
            unit: "month",
            displayFormats: {
              month: "MMM",
            },
          },
          distribution: "linear",
          },
          {
            id: "bar",
          offset: true,
          type: "category",
          distribution: "series",
          }
      ],
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  },
});

【讨论】：