AmCharts不规则网格轴：不同宽度柱状图无间距堆叠实现问询

我来帮你搞定这个需求！要实现不同宽度的柱状图连续紧密排列、无空白间隔，关键是调整数据结构和坐标轴配置，让每个柱子对应独立的分类项，同时消除分类间的间距。下面是具体的实现方案：

核心思路 #

原来的代码是把多个柱子放在同一个分类（country）下，这种结构会让柱子在同一分类区间内分布，无法实现逐个紧密排列。我们需要把每个柱状数据拆成独立的分类条目，再通过配置让分类轴的网格适配每个柱子的宽度，同时去掉分类间的间距。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        #chartdiv { width: 100%; height: 500px; }
        .amcharts-export-menu-top-right { top: 10px; right: 0; }
    </style>
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
</head>
<body>
    <div id="chartdiv"></div>
    <script>
        var chart = AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "theme": "light",
            "marginRight": 70,
            // 重构数据：每个柱子对应一个独立的条目，新增widthRatio控制宽度
            "dataProvider": [
                { "name": "USA", "value": 3025, "color": "#FF0F00", "widthRatio": 0.8 },
                { "name": "China", "value": 1882, "color": "#FF6600", "widthRatio": 0.2 },
                { "name": "Japan", "value": 1809, "color": "#FF9E01", "widthRatio": 0.5 }
            ],
            "valueAxes": [{
                "axisAlpha": 0,
                "position": "left",
                "title": "Visitors from country"
            }],
            "startDuration": 1,
            // 单graph即可，用columnWidthField绑定每个条目的宽度
            "graphs": [{
                "balloonText": "<b>[[category]]: [[value]]</b>",
                "fillColorsField": "color",
                "fillAlphas": 0.9,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "value",
                "columnWidthField": "widthRatio"
            }],
            "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": false
            },
            "categoryField": "name",
            // 配置分类轴：关闭自动网格，设置网格数等于数据量，消除间距
            "categoryAxis": {
                "gridPosition": "start",
                "labelRotation": 45,
                "autoGridCount": false,
                "gridCount": 3, // 必须和dataProvider的条目数一致
                "spacing": 0
            },
            "export": { "enabled": true }
        });
    </script>
</body>
</html>

关键配置说明 #

• 数据结构重构：把每个柱子的信息（名称、数值、颜色、宽度比例）放在一个独立的数据项中，这样每个柱子对应一个分类。
• 分类轴（categoryAxis）：
  • autoGridCount: false + gridCount: 3：强制分类轴生成和数据条目数量一致的网格，确保每个柱子对应一个网格单元。
  • spacing: 0：消除分类之间的空白间隔。
• Graph配置：使用columnWidthField绑定数据中的widthRatio字段，实现每个柱子的宽度自定义。

这样调整后，不同宽度的柱子就会紧密连续排列，没有空白间隔啦！

内容的提问来源于stack exchange，提问作者Oleg Eliiashiv