如何减少 Chart.JS 条形图中图例和图表之间的间距，并在图形区域中增加间距？

Question

我正在生成一个 Chart.JS 条形图，其呈现如下：

如您所见，图例的底部和网格/图表的顶部挤在一起。此外，各个条形图过度拥挤在一起，使得这些值有点难以阅读；请注意，红色条左侧和蓝色条右侧都有足够的空间。并且象限本身有足够的空间可以在图例和网格/图表之间添加垫片或空间。

如何“展示”这些元素，使数据更清晰、演示更有吸引力？

这是正在使用的代码：

HTML

<div class="row">
    <div class="col-md-6">
        <div class="bottomleft">
            <h2 class="sectiontext">Forecast/Impact Analysis</h2>
            <div class="graph_container">
                <canvas id="forecastLineChart"></canvas>
            </div>
        </div>
    </div>
    . . .

CSS

“row”和“col-md-6”类是 Bootstrap。 “graph_container”必须是 Chart.JS 类（它不是我的类）。

.bottomleft {
    margin-left: 16px;
    padding: 16px;
    border: 1px solid black;
}

.sectiontext {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Candara, Calibri, Cambria, serif;
    color: green;
    margin-top: -4px;
}

JAVASCRIPT/jQuery

    var ctxForecastChart = $("#forecastLineChart"); 
    var forecastChartData = {
        labels: ["Total Sales"],
        datasets: [
        {
            label: "8/28/2016 - 9/3/2016",
            backgroundColor: "rgba(255,0,0,0.75)",
            hoverBackgroundColor: "rgba(255,0,0,1)",
            data: [1631437.17]
        },
        {
            label: "9/4/2016 - 9/10/2016",
            backgroundColor: "rgba(255,153,0,0.75)",
            hoverBackgroundColor: "rgba(255,153,0,1)",
            data: [1523898.94]
        },
        {
            label: "9/11/2016 - 9/17/2016",
            backgroundColor: "rgba(255,255,0,0.75)",
            hoverBackgroundColor: "rgba(255,255,0,1)",
            data: [1755669.93]
        },
        {
            label: "9/18/2016 - 9/24/2016",
            backgroundColor: "rgba(0,255,0,0.75)",
            hoverBackgroundColor: "rgba(0,255,0,1)",
            data: [1873205.42]
        },
        {
            label: "9/25/2016 - 10/1/2016",
            backgroundColor: "rgba(0,0,255,0.75)",
            hoverBackgroundColor: "rgba(0,0,255,1)",
            data: [1838204.79]
        }]
};

var forecastOptions = {
    tooltips: {
        enabled: true
    },
    animation: {
            duration: 500,
            easing: "easeOutQuart",
            onComplete: function () {
                var ctx = this.chart.ctx;
                ctx.font 
Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal'
Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset) {
                    for (var i = 0; i < dataset.data.length; i++) {
                        var model = dataset._meta[Object.keys(dataset._met
[0]].data[i]._model, scale_max = dataset._meta[Object.keys(dataset._met
[0]].data[i]._yScale.maxHeight;
                        ctx.fillStyle = '#444';
                        var y_pos = model.y - 5;
                        if ((scale_max - model.y) / scale_max >= 0.93)
                            y_pos = model.y + 20;
                        ctx.fillText(addCommas(dataset.data[i]), model.x
y_pos);
                    }
                });
            }
        }
    };

var forecastBarChart = new Chart(ctxForecastChart, {
    type: 'bar',
    data: forecastChartData,
    options: forecastOptions
});

更新

这不是一个完整的解决方案，但我这样改进了它：

<canvas id="forecastLineChart" height="190"></canvas>

IOW，我将高度值添加到画布中，以便网格/图表现在更好地填充象限：

也许，y 轴数字仍然可以使用逗号，而且条形可以在水平方向上展开得更多。

Answer 1

在变量

forecastOptions

内，您只需添加所谓的

scales

选项即可。

var forecastOptions = {
    scales: {
        xAxes: [{
            barPercentage: 0.7,
            categoryPercentage: 1
        }]
    },
    tooltips...

这会调整条形的宽度 (

barPercentage

) 以及所有条形的整体宽度 (

categoryPercentage

)

您可以将 0.7 更改为您想要的宽度。所有条形周围的额外空间是因为它们属于同一类别，并且该选项默认设置为 0.8，这意味着 5 个条形仅占整体的 80%。

希望这有帮助

Answer 2

如果有人仍在寻找答案，我对条形图也有类似的问题。最后我找到了解决问题的方法。

我原来的图表是这样的

在我将以下选项添加到图表中后，

options: {
           scales: {
                y: {
                  beginAtZero: true,
                  grace: '5%',
                }
              },
            },

最终图像是。这个解决方法对我有用。 Grace 在图表顶部添加了某种填充。 来源：https://www.youtube.com/watch?app=desktop&v=3Pss5GvlPd0&ab_channel=ChartJS