Chart JS - 水平条形图未填充画布答案

【问题标题】：Chart JS - Horizontal Bar Chart Not Filling CanvasChart JS - 水平条形图未填充画布
【发布时间】：2019-07-10 01:00:04
【问题描述】：

我有一个堆叠的水平条形图列表，我希望它们都具有相同的宽度。

每个画布的宽度相同，每个图表使用相同的配置（当然，使用不同的数据集）。

我测试了很多不同的配置选项，从 barPercentage 到 categoryPercentage，再到在 Y 轴上设置 fullWidth。

Here is a JSFiddle showing the same issue.

我错过了什么？

this.chartConfig = {
    type: 'horizontalBar',
    data: {
        labels: this.labels,
        datasets: [
            {
                backgroundColor: this.colors,
                data: this.data,
            },
            highlight_dataset,
        ],
    },
    options: {
        responsive: true,
        title: { display: false },
        legend: { display: false },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            },
        },
        scales: {
            xAxes: [
                {
                    display: false,
                    stacked: true,
                },
            ],
            yAxes: [
                {
                    display: false,
                    stacked: true,
                    beforeFit: (scaleInstance: any) => {
                        scaleInstance.fullWidth = true;
                    },
                },
            ],
        },
        events: ['mousemove'],
        onHover: (event: any, chartElement: any) => {
            event.target.style.cursor = chartElement && chartElement[0] ? 'pointer' : 'default';
        },
        tooltips: {
            filter: (tooltipItem: any) => {
                return tooltipItem.datasetIndex === 0;
            },
        },
    },
};

【问题讨论】：

添加最小的完整和可验证的例子。
@VitaliyTerziev 我会举一个例子。
@VitaliyTerziev 我已经用 JSFiddle 的链接更新了答案。
对未来开发者的快速提醒：从 chart.js v3.0 开始，Horizontal Bar 配置更改为 chartConfig = { type: 'bar', options: { indexAxis: 'y' } };跨度>

标签： javascript chart.js

【解决方案1】：

您可以将max 值用于分时，它将为所有图表设置相同的最大值。 Here is an updated JSFiddle.

base_options.options.scales.xAxes[0].ticks.max = max;

const base_options = {
    type: 'horizontalBar',
    data: {
        labels: [],
        datasets: [
            {
                backgroundColor: [],
                data: [],
            }
        ],
    },
    options: {
        responsive: true,
        title: { display: false },
        legend: { display: false },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            },
        },
        scales: {
            xAxes: [
                {
                    display: false,
                    stacked: true,

                }
            ],
            yAxes: [
                {
                    display: false,
                    stacked: true,
                    ticks: {
                        max: max
                    }
                },
            ],
        },
        events: ['mousemove'],
        onHover: (event, chartElement) => {
            event.target.style.cursor = chartElement && chartElement[0] ? 'pointer' : 'default';
        },
        tooltips: {
            filter: (tooltipItem) => {
                return tooltipItem.datasetIndex === 0;
            },
        },
    },
};

【讨论】：

这里的问题是每个数据集现在都有相同的最大值。我故意将max 变量放在forEach 中，因为我的图表每个都有不同的最大值。实际上，每个图表（在我的实际项目中）都有完全不同的比例并且是不相关的。
我不明白为什么一个new Chart() 的最大值会影响另一个new Chart() 的显示。它们应该完全分开。
@WebWanderer 他们是，但如果你从图表渲染的角度来看，他们会决定轴上刻度的最大值应该是多少。或者，您可以将刻度的最大值指定为：jsfiddle.net/ofmtjug7
是的！做到了！ options.scales.xAxes[n].ticks.max 设置做到了！更新您的答案，您将获得代表。谢谢！
我更新了您的答案，只显示必要的内容，以免分散读者的注意力。数据的制定方式是正确的，max的值应该设置在forEach中。您提供的 JSFiddle 反映了这一点。答案就是 X 轴上的 max 值。

【解决方案2】：

只需删除 categoryPercentage 并添加以下代码

var options = {
scales: {
    xAxes: [{
        barPercentage: 0.4
    }]
}

}

【讨论】：

为什么是0.4？这是计算出来的吗？
我给了一个随机数，你随便给。