Question

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

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

我测试了许多不同的配置选项，从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;
            },
        },
    },
};

Answer 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;
            },
        },
    },
};

Answer 2

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

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

}

图表JS-水平条形图未填充画布

2 个答案: