Question

使用 amcharts 插件创建条形图。有没有办法，我可以减少图表中x和y axis之间的距离/间距。的 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，我认为你得到了你想要的东西：）

<强>附录

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

中将categoryAxis设置为0

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

更新了小提琴

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

1 个答案: