javascript - 条形图中的多个数据集 -> 条形超出范围

问题描述

我正在尝试使用 chart.js 在条形图中显示数据。我正在使用多个数据集，因此我可以将数据 ID 显示为数据集的标签。我在每个数据集中只有一个数据点，x 轴显示时间。我想显示 15 个数据集。问题是，当显示多个数据集时，一些条会超出范围。它看起来如何以及我希望它看起来如何。我

我尝试了 barPercentage 和 categoryPercentage 选项，但没有成功。

这是我到目前为止得到的：

<html>
    <head>
    <script src="node_modules\chart.js\dist\Chart.bundle.js"></script>
    <style>
        canvas{
            height:120px !important;
            width:302px !important;
        }
    </style>
    </head>
    <body>
    <div>
        <canvas id= "myChart" width=400 height=400></canvas>
    </div>
        <script>
            <!-- My script for the Chart -->
        </script>
    </body>
</html>

以及处理图表的脚本：

//The array of datasets that I want to display
var datasetarray = [{
label: 'Secounds needed for dummy build',
data: [{x:"19700101T0001",y:20}],
backgroundColor: ['rgba(0, 0, 0, 0.1)'],
    borderColor: ['rgba(0, 0, 0, 1)'],
borderWidth: 1
}
, //Some more datasets
,{
label: 'Secounds needed for dummy build',
data: [{x:"19710315T0001",y:20}],
backgroundColor: ['rgba(0, 0, 0, 0.1)'],
    borderColor: ['rgba(0, 0, 0, 1)'],
borderWidth: 1
}];

//Creating the Chart
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: datasetarray
    },
    options: {
        maintainAspectRatio: false,
        legend: {display: false},
        scales: {
            xAxes: [{
                type:'time',
                distribution: 'series',             
                barPercentage: 0.9,
                categoryPercentage: 0.9,
                bounds:'data',
                offset:false,
                ticks:{source: 'labels'}
                }],
            yAxes: [{
                ticks: {
                    suggestedMax: 100
                    ,suggestedMin: 20
                    ,beginAtZero: true
                }
            }]
        }
    }
});

编辑：这是一个可以帮助你帮助我的jsfiddle 。提前致谢：）

标签： javascripthtmlchart.js

javascript - 条形图中的多个数据集 -> 条形超出范围

问题描述

解决方案

推荐阅读