Time ChartJS：如何将每月条形图与每日折线图居中？

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

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

要使用的JSFIDLE：

---

欢迎来到Stackoverflow

似乎有一种方法比使用月15号更好

需要为属于类别类型轴的条形图添加另一个轴。另外，在该轴上有“offset:true”也是非常关键的。否则它将不会居中

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

我还创作了一把小提琴：

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,
          },
        },
      ],
    },
  },
});

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,
          },
        },
      ],
    },
  },
});