Chart js水平条与标签不对齐

pvcm50d1 于 2023-08-05 发布在 Chart.js

关注(0)|答案(2)|浏览(135)

这是一个独立的图表js水平条形图，X轴上有一个时间轴。您可以在浏览器中打开它，看看会发生什么。正如所附的屏幕截图，酒吧不排队的标签。一定有个简单的方法可以解决。如有任何帮助，我们将不胜感激。

`<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/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="log_chart" width="600" height="200"></canvas>
    </div>
</div>

<script>
    // config 
    const config = {
        type: 'bar',
        data: {
            barPercentage: 0.8,
            categoryPercentage: 1,
            labels: ['Test1', 'Test2', 'Test3', 'Test4'],
            datasets: [{
                data: [{
                    y: 'Test1',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:05:02']
                },{
                    y: 'Test1',
                    x: ['2022-09-29T16:06:00', '2022-09-29T16:10:10']
                }]
            },{
                data: [{
                    y: 'Test2',
                    x: ['2022-09-29T16:10:00', '2022-09-29T16:15:02']
                }, {
                    y: 'Test2',
                    x: ['2022-09-29T16:17:00', '2022-09-29T16:20:10']
                }]
            },{
                data: [{
                    y: 'Test3',
                    x: ['2022-09-29T16:20:00', '2022-09-29T16:25:02']
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:26:00', '2022-09-29T17:30:10']
                }]
            },{
                data: [{
                    y: 'Test4',
                    x: ['2022-09-29T16:30:00', '2022-09-29T16:35:02']
                }, {
                    y: 'Test4',
                    x: ['2022-09-29T16:37:00', '2022-09-29T16:40:10']
                }]
            }],
        },
        options: {
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'second'
                    },
                    min: new Date('2022-09-29T16:00:00'),
                    max: new Date('2022-09-29T16:45:00'),
                    ticks: {
                        stepSize: 1,
                        minRotation: 90,
                        maxRotation: 90
                    },
                    beginAtZero: true
                },
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    yAlign: 'bottom',
                    callbacks: {
                        label: (context) => {
                            return context.dataset.labelData[context.dataIndex];
                        }
                    }
                }
            }
        }
    };

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

    // Instantly assign Chart.js version
    //const chartVersion = document.getElementById('log_chart_version');
    //chartVersion.innerText = Chart.version;
</script>
`

字符串
我已经在网上搜索了一个解决方案，但我仍然无法找到它。

更新：

下面的脚本完成了我所需要的工作，只是条形图没有与左侧的标签对齐。我需要在底部的时间轴线每行多个酒吧。我还需要设置每个栏的背景颜色，并在每个栏上显示一个工具提示。

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/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="log_chart" width="600" height="200"></canvas>
    </div>
</div>

<script>
    // config 
    const config = {
        type: 'bar',
        data: {
            <!-- labels: ['Test1', 'Test2', 'Test3', 'Test4'], -->
            datasets: [{
                backgroundColor: 'rgba(64, 224, 208, 255)',
                borderColor: 'rgba(64, 224, 208, 255)',
                barPercentage: 0.8,
                categoryPercentage: 1,
                data: [{
                    y: 'Test1',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:06:02'],
                    tooltip: 'Tooltip1'
                }, {
                    y: 'Test1',
                    x: ['2022-09-29T16:18:00', '2022-09-29T16:25:10'],
                    tooltip: 'Tooltip2'
                }, {
                    y: 'Test1',
                    x: ['2022-09-29T16:31:00', '2022-09-29T16:50:02'],
                    tooltip: 'Tooltip3'
                }]
            }, {
                backgroundColor: 'rgba(100, 149, 237, 255)',
                borderColor: 'rgba(100, 149, 237, 255)',
                borderWidth: 0,
                barPercentage: 0.8,
                categoryPercentage: 1,
                data: [{
                    y: 'Test2',
                    x: [ '2022-09-29T16:03:03', '2022-09-29T16:13:06' ],
                    tooltip: 'Tooltip4'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:16:03', '2022-09-29T16:30:06' ],
                    tooltip: 'Tooltip5'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:35:51', '2022-09-29T16:48:54' ],
                    tooltip: 'Tooltip6'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:49:51', '2022-09-29T16:58:54' ],
                    tooltip: 'Tooltip7'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:20:37', '2022-09-29T16:20:40' ],
                    tooltip: 'Tooltip8'
                }]
            }, {
                backgroundColor: 'rgba(143, 188, 139, 255)',
                borderColor: 'rgba( 64, 224, 208, 255)',
                barPercentage: 0.8,
                categoryPercentage: 1,
                data: [{
                    y: 'Test3',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:05:02'],
                    tooltip: 'Tooltip9'
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:12:00', '2022-09-29T16:30:10'],
                    tooltip: 'Tooltip10'
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:40:00', '2022-09-29T16:55:48'],
                    tooltip: 'Tooltip11'
                }]
            }]
        },
        options: {
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'minute'
                    },
                    min: new Date('2022-09-29T16:00:00'),
                    max: new Date('2022-09-29T16:45:00'),
                    ticks: {
                        padding: 70,
                        stepSize: 1,
                        minRotation: -90,
                        maxRotation: -90
                    },
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    yAlign: 'bottom',
                    callbacks: {
                        label: (context) => {
                            return context.dataset.data[context.dataIndex].tooltip;
                        }
                    }
                }
            }
        }
    };

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

型

chart.js

来源：https://stackoverflow.com/questions/76682602/chart-js-horizontal-bars-dont-line-up-with-the-labels

2条答案

按热度按时间

wmomyfyw1#

我认为你可以使用1个数据集而不是每个标签1个。如果你期待的是下面的片段。

// config 
    const config = {
        type: 'bar',
        data: {
            datasets: [{
                barPercentage: 0.8,
                categoryPercentage: 1,
                data: [{
                    y: 'Test1',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:05:02']
                }, {
                    y: 'Test1',
                    x: ['2022-09-29T16:06:00', '2022-09-29T16:10:10']
                }, {
                    y: 'Test2',
                    x: ['2022-09-29T16:10:00', '2022-09-29T16:15:02']
                }, {
                    y: 'Test2',
                    x: ['2022-09-29T16:17:00', '2022-09-29T16:20:10']
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:20:00', '2022-09-29T16:25:02']
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:26:00', '2022-09-29T17:30:10']
                }, {
                    y: 'Test4',
                    x: ['2022-09-29T16:30:00', '2022-09-29T16:35:02']
                }, {
                    y: 'Test4',
                    x: ['2022-09-29T16:37:00', '2022-09-29T16:40:10']
                }]
            }],
        },
        options: {
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'minute'
                    },
                    min: new Date('2022-09-29T16:00:00'),
                    max: new Date('2022-09-29T16:45:00'),
                    ticks: {
                        stepSize: 1,
                        minRotation: 90,
                        maxRotation: 90
                    },
                    beginAtZero: true
                },
                y: {
                  type: 'category'
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    yAlign: 'bottom',
                    callbacks: {
                        label: (context) => {
                            return context.dataset.data[context.dataIndex].x;
                        }
                    }
                }
            }
        }
    };

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

* {
        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;
      }

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/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>
<div class="container">
    <div class="col-12 mt-3 mb-3">
      <canvas id="log_chart" width="600" height="200"></canvas>
    </div>
</div>

赞(0）回复(0）举报 2023-08-05

u0njafvf2#

多亏了user2057925，我才能让它工作。下面是完整的代码。

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/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="log_chart" width="600" height="200"></canvas>
    </div>
</div>

<script>
    const colors = {
      'Test1\nline2': 'rgba(64, 224, 208, 255)',
      'Test2\nline2': 'rgba(100, 149, 237, 255)',
      'Test3\nline2': 'rgba(143, 188, 139, 255)'
    };
    const getColor = function(context) {
      const {chart, datasetIndex, dataIndex} = context;
      const dataset =  chart.data.datasets[datasetIndex];
      const data = dataset.data[dataIndex];
      return colors[data.y];
    }

    // config 
    const config = {
        type: 'bar',
        data: {
            datasets: [{
                backgroundColor: getColor,
                borderColor: getColor,
                barPercentage: 0.8,
                categoryPercentage: 1,
                data: [{
                    y: 'Test1\nline2',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:06:02'],
                    tooltip: 'Tooltip1'
                }, {
                    y: 'Test1\nline2',
                    x: ['2022-09-29T16:18:00', '2022-09-29T16:25:10'],
                    tooltip: 'Tooltip2'
                }, {
                    y: 'Test1\nline2',
                    x: ['2022-09-29T16:31:00', '2022-09-29T16:50:02'],
                    tooltip: 'Tooltip3'
                },{
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:03:03', '2022-09-29T16:13:06' ],
                    tooltip: 'Tooltip4'
                }, {
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:16:03', '2022-09-29T16:19:06' ],
                    tooltip: 'Tooltip5'
                }, {
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:20:37', '2022-09-29T16:30:40' ],
                    tooltip: 'Tooltip8'
                },{
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:35:51', '2022-09-29T16:48:54' ],
                    tooltip: 'Tooltip6'
                }, {
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:49:51', '2022-09-29T16:58:54' ],
                    tooltip: 'Tooltip7'
                }, {
                    y: 'Test3\nline2',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:05:02'],
                    tooltip: 'Tooltip9'
                }, {
                    y: 'Test3\nline2',
                    x: ['2022-09-29T16:12:00', '2022-09-29T16:30:10'],
                    tooltip: 'Tooltip10'
                }, {
                    y: 'Test3\nline2',
                    x: ['2022-09-29T16:40:00', '2022-09-29T16:55:48'],
                    tooltip: 'Tooltip11'
                }]
            }]
        },
        options: {
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'minute'
                    },
                    min: new Date('2022-09-29T16:00:00'),
                    max: new Date('2022-09-29T16:55:48'),
                    ticks: {
                        padding: 70,
                        stepSize: 1,
                        minRotation: -90,
                        maxRotation: -90
                    },
                    beginAtZero: true
                },
                y: {
                    ticks: {
                        callback: function(value, index, labels) {
                            return this.getLabelForValue(value).split('\n');
                        }
                    }
                }
            },
            plugins: {
                   legend: {
                    display: false,
                },
                tooltip: {
                    yAlign: 'bottom',
                    callbacks: {
                        label: (context) => {
                            return context.dataset.data[context.dataIndex].tooltip;
                        }
                    }
                }
            }
        }
    };

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

字符串

赞(0）回复(0）举报 2023-08-05

我来回答

Chart js水平条与标签不对齐

2条答案

相关问题

热门标签

最新问答