ChartJS:如何将每月柱线相对于每日折线图居中? [英] ChartJS: How to center monthly bars against a daily line chart?

问题描述

我正在尝试显示每月总销售额和每日库存水平.这样一来，您可以轻松地看到特定月份您没有库存，因为库存不足.每月销售额是一个条形图，应位于每个月的中间(在刻度之间).

I'm trying to display total monthly sales and daily stock level. This way you could easily see that you didn't have any sales a particular month because you had low stock. Monthly sales is a bar chart that should be in the center of each month (in between the ticks).

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

In order to get it close to the middle my data is using the 15th of each month as the date to center it. I would want to know if there is a better way to achieve this?

JSFiddle可以使用: https://jsfiddle.net/8Lydhpqc/3/

JSFiddle to play around with: 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,
          },
        },
      ],
    },
  },
});

推荐答案

欢迎使用Stackoverflow！

Welcome to Stackoverflow!

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

It seems that there is a way better than using the 15th of the month.

您需要为条形添加另一个轴，该轴是类别类型轴.同样重要的是，您必须具有"offset:true"(偏移:true)在那个轴上.否则它将不会居中.

You need to add another axis for the bar that is a category type axis. Also its pretty critical that you have "offset: true" on that axis as well. Otherwise it will not center.

在下面的代码中，我将该类别命名为"bar"，和现有的一条线"

In the code below I named that category "bar" and the existing one "line"

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

I also created a fiddle: 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,
          },
        },
      ],
    },
  },
});

这篇关于ChartJS:如何将每月柱线相对于每日折线图居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！