ChartJS 水平时间叠加条形图

iszxjhcz  于 2023-03-18  发布在  Chart.js
关注(0)|答案(1)|浏览(162)

试图用堆叠的水平条形图来显示时间,我做了一个小提琴,可以得到至少一个时间跨度的图表,但我似乎不能得到第二个堆叠旁边?理想的情况下,我是有蓝色的堆叠旁边的橙子。
不知道我在这里做错了什么,如果它只是时间格式,我错了或其他东西。

<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
</body>
const options = {
  type: 'bar',
  data: {
    labels: [
      "Sun 19th Feb 2023",
      "Mon 20th Feb 2023",
      "Tue 21st Feb 2023",
      "Wed 22nd Feb 2023",
      "Thu 23rd Feb 2023",
      "Fri 24th Feb 2023",
      "Sat 25th Feb 2023"
    ],
    datasets: [{
        label: '1st Data',
        data: [["08:25", "08:39"]],
        backgroundColor: 'orange',
      },
      {
        label: '2nd Data',
        data: [["08:39", "08:59"]],
        backgroundColor: 'blue',
      }
    ]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        stacked: true,
      },
      x: {
        parsing: false,
        stacked: true,
        position: 'top',
        type: 'time',
        time: {
          unit: 'hour',
        },
        min: "07:00",
        max: "19:00",
      },
    },
  },
  plugins: {
    legend: {
      display: false
    },
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

木琴...
https://codepen.io/macka601/pen/poOrKRj

x0fgdtte

x0fgdtte1#

为了回答我自己的问题,我需要关闭x轴的堆叠

x: {
        parsing: false,
        stacked: false,
        position: 'top',
        type: 'time',
        time: {
          unit: 'hour',
        },
        min: "07:00",
        max: "19:00",
      },

相关问题