减少 amcharts 串行条形图中条形之间的差距

Question

正在使用 amcharts plugin to create bar graph. Is there any ways, I can reduce distance/gap between bars both x an y axis in the graph. Here is the fiddle

代码

var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "dataProvider": [{
        "name": "John",
        "startTime": 0,
        "endTime": 11,
        "color": "#FF0F00"
    }, {
        "name": "Joe",
        "startTime": 0,
        "endTime": 13,
        "color": "#FF9E01"
    }, {
        "name": "Susan",
        "startTime": 0,
        "endTime": 18,
        "color": "#F8FF01"
    }, {
        "name": "Eaton",
        "startTime": 0,
        "endTime": 19,
        "color": "#04D215"
    }],
    "valueAxes": [{
        "axisAlpha": 0,
        "gridAlpha": 0.1
    }],
    "startDuration": 1,
    "graphs": [{
        "balloonText": "<b>[[category]]</b><br>starts at [[startTime]]<br>ends at [[endTime]]",
        "colorField": "color",
        "fillAlphas": 0.8,
        "lineAlpha": 0,
        "openField": "startTime",
        "type": "column",
        "valueField": "endTime"
    }],
    "rotate": true,
    "columnWidth": 0.2,
    "categoryField": "name",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha": 0,
        "gridAlpha": 0.1,
        "position": "left"
    },
    "export": {
        "enabled": true
     }
});

Answer 1

要缩小图形并减少边距，您必须更改 columnWidth 和 css 中的高度：

fiddle

通过将图表的高度更改为 200px：

#chartdiv {
    width   : 100%;
    height  : 200px;
}

并将 columnWidth 设置为 0.8，我想你得到了你想要的:)

附录

要删除水平灰线，您可以在 categoryAxis

中将 gridAlpha 设置为 0

"categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
}

更新了 fiddle

减少 amcharts 串行条形图中条形之间的差距

Reduce gap between bars in amcharts serial bar graph

javascript

jquery

amcharts