【问题标题】:Highcharts - Space between bars based on the bars' widthHighcharts - 基于条形宽度的条形之间的空间
【发布时间】:2021-03-08 21:08:51
【问题描述】:

我需要根据条形图在条形图之间进行分隔。这意味着如果条的宽度为 1X,条之间的间距必须为 1.5X。那可能吗?我使用了 pointPadding 和 groupPadding 等变量,但我无法解决这个问题。 在这里,我将 pointPadding 设置为 0.15,但似乎并没有在它们之间留出 1.5 条空间:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
    },

    plotOptions: {
        series: {
            pointPadding: 0.15
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
});

https://jsfiddle.net/5nza8q1s/19/

另外,我需要将第一个和最后一个分隔(在条形和图表边框之间)设置为 0.5X,这也可能吗?

【问题讨论】:

    标签: highcharts bar-chart spacing


    【解决方案1】:

    对于第一个要求,您可以使用 groupPadding 来计算比例值:0.3 - 0.4 - 0.3,这使我们在列之间得到 0.6 - 0.4 的 150%(全部以轴为单位)。

        plotOptions: {
            series: {
                pointPadding: 0,
                groupPadding: 0.3
            }
        }
    

    要在轴端实现更短的距离,请使用minmax 属性:

        xAxis: {
            ...,
            min: 0.1, // increased from 0
            max: 6.9 // reduced from 7
        },
    

    现场演示: https://jsfiddle.net/BlackLabel/6uktc3as/

    API 参考:

    https://api.highcharts.com/highcharts/xAxis.max

    https://api.highcharts.com/highcharts/xAxis.min

    https://api.highcharts.com/highcharts/series.column.groupPadding

    【讨论】:

    猜你喜欢
    • 2016-02-06
    • 2018-05-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-05
    相关资源
    最近更新 更多