代码之家 › 专栏 › 技术社区 › João Menighin

条形图-条形填充和对齐

highcharts javascript

João Menighin · 技术社区 · 6 年前

我有一个显示3个条形图的堆积百分比条形图。

由于某种原因,这些条之间有很大的空间,并且没有与标签对齐(只有中间的条)。

设置一个固定的 高度和messing with pointpadding i can get close to what I want,but the bars are still not aligned:。


   
    
     
      
       
        
       
      
      有什么想法吗?在这里设置固定高度是正确的吗?
      
      
      
       JSFiddle:
       
        https://jsfiddle.net/Lr0bszj6/
       
      
      
       由于某种原因,这些条之间有很大的空间,并且没有与标签对齐(只有中间的条)。
      
      
       设置固定
       
        height
       
       和捣乱
       
        pointPadding
       
       我可以更接近我想要的,但是这些条仍然没有对齐:
      
      
       
        
       
      
      
      
      
       有什么想法吗?在这里设置固定高度是正确的吗?

1 回复 | 直到 6 年前

ewolden 6 年前

你可以设定 grouping 在所有系列或 plotOptions ,这将解决您的问题:

plotOptions: {
    series: {
        grouping: false
    }
}

Highcharts.chart('container', {
    chart: {
        type: "bar",
        backgroundColor: "rgba(0, 0, 0, 0)",
        //height: '200px',
        //margin: [40, null, null, null]
    },
    title: {
        text: "Bars",
        align: "left"
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    yAxis: [{
        title: {
            text: ""
        },
        min: 0
    }],
    legend: {
        enabled: false
    },
    series: [{
            data: [{
                name: "Bar1",
                y: 9994708.36
            }],
            name: "Capacidade de Recebimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">â</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar1",
                y: 5291.64
            }],
            name: "Capacidade de Recebimento Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">â</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 9472.63
            }],
            name: "Capacidade de Movimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">â</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "movement",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 4002.37
            }],
            name: "Capacidade de Movimento Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">â</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "movement",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar3",
                y: 4260.82
            }],
            name: "Capacidade de Bar3 Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">â</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "expedition",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar3",
                y: 3124.18
            }],
            name: "Capacidade de Bar3 Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">â</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "expedition",
            stacking: "percent"
        }
    ],
    xAxis: {
        type: "category",
        tickPositions: [0,1,2]
    },
    plotOptions: {
        series: {
            grouping: false
        }
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

工作JSfiddle示例: https://jsfiddle.net/ewolden/Lr0bszj6/12/