堆叠的条形图，水平轴为时间类别

Question

我通过图表js https://jsfiddle.net/elip123/aL4q6cuk/18/制作了折线图。

var ctx = document.getElementById('mychart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;

var chart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: [],
      legend: {
         display: true
      },
      datasets: [{
          fill: false,
          data: getHeightData(),
          label: 'Height',
          backgroundColor: "#FF2D00",
          borderColor: "#FF2D00",
          type: 'line',

      },
      {
          fill: false,
          data: getWeightData(),
          label: 'Weight',
          backgroundColor: "#0027FF",
          borderColor: "#0027FF",
          type: 'line',

      }]
  },
  options: {
    animation: false,
    responsive: true,
    scales: {
      xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Time ( UTC )'
          },
          type: 'time',
          time: {
            tooltipFormat: "hh:mm",
            displayFormats: {
              hour: 'hh:mm'
            }
          },
          ticks: {
                    maxRotation: 90,
                    minRotation: 90
          }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Value'
        },
      }]
    }
  }
});

function getHeightData() {
  return [
    { x: new Date("2020-01-06 15:00:00"), y: 10 },
    { x: new Date("2020-01-06 14:00:00"), y: 20 },
    { x: new Date("2020-01-06 11:00:00"), y:8 },
    { x: new Date("2020-01-06 05:00:00"), y: 30 }

  ];
}

function getWeightData() {
  return [
    { x: new Date("2020-01-06 06:00:00"), y: 24 },
    { x: new Date("2020-01-06 07:00:00"), y:12 },
    { x: new Date("2020-01-06 08:00:00"), y: 4 },
    { x: new Date("2020-01-06 09:00:00"), y:8 }

  ];
}

现在我要像这样将其切换到堆积条形图我花了很多时间来找出并绘制它。但是，这对我来说确实是挑战。我的脚本有问题吗？我应该变成图表而不是Chart js吗？请帮助我

Answer 1

对，您的问题真的很难。如您所知，我在几个月前也试图做到这一点。但是我做不到。您应该找到其他图表类型而不是它