chartjs 放大到错误的行

Question

我以前做过这个工作，所以我知道这是可能的。我使用 Chartjs 来做几件事：放大和缩小、向左、向右、向上和向下平移、选择图表上的矩形区域并缩放到它（使用拖动实现）。无论我在 Y 轴上平移还是放大或缩小，图表每次都会缩放到底行。当我按住 CTRL 键后用鼠标选择一个矩形区域时，图表每次也会缩放到底行。我过去还能够在 Y 轴上平移时向上和向下平移，但这也会放大到图表的底线。我做错了什么？

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
    * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
    }

    .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }

      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }

      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }
</style>

<div class="container">
    <div class="col-12 mt-3 mb-3">
      <canvas id="chart" width="800" height="580"></canvas>
    </div>
</div>

<script>
    const getColor = function (context) {
      const {chart, datasetIndex, dataIndex} = context;
      const dataset =  chart.data.datasets[datasetIndex];
      const data = dataset.data[dataIndex];
      
      if (data == undefined)
        return 'rgba(255, 255, 255, 255)';
      else
        return data.backgroundColor;
    }

    // config 
    const config = {
        type: 'bar',
        data: {
            datasets: [{
                backgroundColor: getColor,
                borderColor: getColor,
                barPercentage: 1,
                categoryPercentage: 1,
                minimumTime: '2022-09-29T16:10:00',
                maximumTime: '2022-09-29T16:22:29',
                timeUnit: 'second',
                stepSize: 1,
                data: [
                {
                  label: 'Teat 1',
                  timeSegment: [ '2022-09-29T16:20:37', '2022-09-29T16:20:40' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  label: 'Teat 1',
                  timeSegment: [ '2022-09-29T16:17:51', '2022-09-29T16:17:54' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  label: 'Teat 1',
                  timeSegment: [ '2022-09-29T16:16:51', '2022-09-29T16:16:54' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  label: 'Teat 1',
                  timeSegment: [ '2022-09-29T16:16:03', '2022-09-29T16:16:06' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  label: 'Teat 1',
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:06' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:00', '2022-09-29T16:10:10' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:00', '2022-09-29T16:10:02' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:10', '2022-09-29T16:10:20' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:20', '2022-09-29T16:10:23' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:23', '2022-09-29T16:10:26' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:26', '2022-09-29T16:10:29' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:26', '2022-09-29T16:10:31' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:31', '2022-09-29T16:10:41' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  label: 'Teat 3',
                  timeSegment: [ '2022-09-29T16:10:31', '2022-09-29T16:10:41' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:41', '2022-09-29T16:10:46' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:46', '2022-09-29T16:10:51' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 2',
                  timeSegment: [ '2022-09-29T16:10:51', '2022-09-29T16:14:00' ],
                  backgroundColor: 'rgba(50, 205, 50, 255)',
                  borderColor: 'rgba(50, 205, 50, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:14:00', '2022-09-29T16:14:02' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:14:00', '2022-09-29T16:14:05' ],
                  backgroundColor: 'rgba(240, 128, 128, 255)',
                  borderColor: 'rgba(240, 128, 128, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:14:05', '2022-09-29T16:14:12' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:14' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:22' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:42' ],
                  backgroundColor: 'rgba(240, 128, 128, 255)',
                  borderColor: 'rgba(240, 128, 128, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:22', '2022-09-29T16:14:32' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:32', '2022-09-29T16:14:35' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:35', '2022-09-29T16:14:38' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:38', '2022-09-29T16:14:43' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:38', '2022-09-29T16:14:41' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:43', '2022-09-29T16:14:53' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  label: 'Teat 5',
                  timeSegment: [ '2022-09-29T16:14:43', '2022-09-29T16:14:53' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:53', '2022-09-29T16:14:58' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:14:58', '2022-09-29T16:15:03' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:05' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:06' ],
                  backgroundColor: 'rgba(255, 160, 122, 255)',
                  borderColor: 'rgba(255, 160, 122, 255)'
                },
                {
                  label: 'Teat 4',
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:05' ],
                  backgroundColor: 'rgba(50, 205, 50, 255)',
                  borderColor: 'rgba(50, 205, 50, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:15:06', '2022-09-29T16:15:11' ],
                  backgroundColor: 'rgba(240, 128, 128, 255)',
                  borderColor: 'rgba(240, 128, 128, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:15:11', '2022-09-29T16:15:18' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 'Teat 10',
                  timeSegment: [ '2022-09-29T16:15:18', '2022-09-29T16:15:21' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                }
                ]
            }]
        },
        options: {
            maintainAspectRatio: false,
            parsing: {
                xAxisKey: 'timeSegment',
                yAxisKey: 'label'
            },
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'second',
                        stepSize: 1
                    },
                    min: new Date('2022-09-29T16:09:30'),
                    max: new Date('2022-09-29T16:20:56'),
                    ticks: {
                        autoSkip: true,
                        minRotation: -90,
                        maxRotation: -90,
                        padding: 70
                    },
                    beginAtZero: true
                },
                y: {
                    reverse: true,
                    ticks: {
                        autoSkip: false,
                        stepSize: 1,
                        font: {
                            size: 8
                        }
                    }
                }
            },
            plugins: {
                zoom: {
                    mode: 'xy',
                    zoom: {
                        wheel: {
                            enabled: true
                        },
                        pinch: {
                            enabled: true
                        },
                        drag: {
                            enabled: true,
                            mode: 'xy',
                            backgroundColor: 'rgba(255, 90, 132, 0.2)',
                            borderColor: 'rgb(255, 99, 132)',
                            borderWidth: 1,
                            modifierKey: 'ctrl'
                        }
                    },
                    pan: {
                        enabled: true,
                        mode: 'x'
                    }
                }
            }
        }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('chart'),
      config
    );
</script>

Answer 1

我可能是错的，但根据我的经验，Chartjs 并不真正支持字符串作为 Y 轴值。 您可以做的是输入数值并在渲染图表时使用回调函数更改它们。

    const getColor = function (context) {
      const {chart, datasetIndex, dataIndex} = context;
      const dataset =  chart.data.datasets[datasetIndex];
      const data = dataset.data[dataIndex];
      
      if (data == undefined)
        return 'rgba(255, 255, 255, 255)';
      else
        return data.backgroundColor;
    }

    const yLabels = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8", "Test 9", "Test 10"];

    // config 
    const config = {
        type: 'bar',
        data: {
            datasets: [{
                backgroundColor: getColor,
                borderColor: getColor,
                //barPercentage: 1,
                //categoryPercentage: 1,
                minimumTime: '2022-09-29T16:10:00',
                maximumTime: '2022-09-29T16:22:29',
                timeUnit: 'second',
                stepSize: 1,
                data: [
                {
                  y: 1,
                  timeSegment: [ '2022-09-29T16:20:37', '2022-09-29T16:20:40' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  y: 1,
                  timeSegment: [ '2022-09-29T16:17:50', '2022-09-29T16:17:54' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  y: 1,
                  timeSegment: [ '2022-09-29T16:16:51', '2022-09-29T16:16:54' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  y: 1,
                  timeSegment: [ '2022-09-29T16:16:03', '2022-09-29T16:16:06' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  y:1,
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:06' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:00', '2022-09-29T16:10:10' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:00', '2022-09-29T16:10:02' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:10', '2022-09-29T16:10:20' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:20', '2022-09-29T16:10:23' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:23', '2022-09-29T16:10:26' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:26', '2022-09-29T16:10:29' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:26', '2022-09-29T16:10:31' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:31', '2022-09-29T16:10:41' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  y: 3,
                  timeSegment: [ '2022-09-29T16:10:31', '2022-09-29T16:10:41' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:41', '2022-09-29T16:10:46' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  label: 2,
                  timeSegment: [ '2022-09-29T16:10:46', '2022-09-29T16:10:51' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 2,
                  timeSegment: [ '2022-09-29T16:10:51', '2022-09-29T16:14:00' ],
                  backgroundColor: 'rgba(50, 205, 50, 255)',
                  borderColor: 'rgba(50, 205, 50, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:14:00', '2022-09-29T16:14:02' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:14:00', '2022-09-29T16:14:05' ],
                  backgroundColor: 'rgba(240, 128, 128, 255)',
                  borderColor: 'rgba(240, 128, 128, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:14:05', '2022-09-29T16:14:12' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:14' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:22' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:14:12', '2022-09-29T16:14:42' ],
                  backgroundColor: 'rgba(240, 128, 128, 255)',
                  borderColor: 'rgba(240, 128, 128, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:22', '2022-09-29T16:14:32' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:32', '2022-09-29T16:14:35' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:35', '2022-09-29T16:14:38' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:38', '2022-09-29T16:14:43' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:38', '2022-09-29T16:14:41' ],
                  backgroundColor: 'rgba(240, 230, 140, 255)',
                  borderColor: 'rgba(240, 230, 140, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:43', '2022-09-29T16:14:53' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  y: 5,
                  timeSegment: [ '2022-09-29T16:14:43', '2022-09-29T16:14:53' ],
                  backgroundColor: 'rgba(100, 149, 237, 255)',
                  borderColor: 'rgba(100, 149, 237, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:53', '2022-09-29T16:14:58' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:14:58', '2022-09-29T16:15:03' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:05' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:06' ],
                  backgroundColor: 'rgba(255, 160, 122, 255)',
                  borderColor: 'rgba(255, 160, 122, 255)'
                },
                {
                  y: 4,
                  timeSegment: [ '2022-09-29T16:15:03', '2022-09-29T16:15:05' ],
                  backgroundColor: 'rgba(50, 205, 50, 255)',
                  borderColor: 'rgba(50, 205, 50, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:15:06', '2022-09-29T16:15:11' ],
                  backgroundColor: 'rgba(240, 128, 128, 255)',
                  borderColor: 'rgba(240, 128, 128, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:15:11', '2022-09-29T16:15:18' ],
                  backgroundColor: 'rgba(64, 224, 208, 255)',
                  borderColor: 'rgba(64, 224, 208, 255)'
                },
                {
                  y: 10,
                  timeSegment: [ '2022-09-29T16:15:18', '2022-09-29T16:15:21' ],
                  backgroundColor: 'rgba(143, 188, 139, 255)',
                  borderColor: 'rgba(143, 188, 139, 255)'
                }]
            }]
        },
        options: {
            maintainAspectRatio: true,
            parsing: {
                xAxisKey: 'timeSegment',
                yAxisKey: 'y'
            },
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'second',
                        stepSize: 1
                    },
                    min: new Date('2022-09-29T16:09:30'),
                    max: new Date('2022-09-29T16:20:56'),
                    ticks: {
                        autoSkip: true,
                        minRotation: -90,
                        maxRotation: -90,
                        padding: 70
                    },
                    beginAtZero: true
                },
                y: {
                    type:'linear',
                    reverse: true,
                    min: 0,
                    max: 10,
                    ticks: {
                        autoSkip: false,
                        stepSize: 1,
                        font: {
                            size: 8
                        },
                        callback: function(val, index) {
                          return yLabels[index];
                        }
                    }
                }
            },
            plugins: {
                zoom: {
                    mode: 'y',
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        pinch: {
                            enabled: true
                        },
                        drag: {
                            enabled: true,
                            backgroundColor: 'rgba(255, 90, 132, 0.2)',
                            borderColor: 'rgb(255, 99, 132)',
                            borderWidth: 1,
                            modifierKey: 'ctrl'
                        }
                    },
                    pan: {
                        enabled: true,
                        mode: 'xy'
                    }
                }
            }
        }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('chart'),
      config
    );

这是一个codepen链接，这样你就可以看到结果