条形图在amchart中缺少一些x轴值

时间:2018-01-10 07:15:19

标签: html json amcharts

在Amcharts中,条形图中缺少某些类别字段(X轴值)。我有超过200个x轴值。请检查以下代码。

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<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>

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "startDuration": 2,
    "dataProvider": [
        {
            "country": "Applications & Analytics",
            "visits": 765,
            "color": "#FF6600"
        },
        {
            "country": "Common Software Foundation",
            "visits": 1,
            "color": "#FF6600"
        },
        {
            "country": "Customer Doc",
            "visits": 1,
            "color": "#FF6600"
        },
        ........
        .......
        ........
        {
            "country": "LTE",
            "visits": 2,
            "color": "#FF6600"
        },
        {
            "country": "Radio Standards II",
            "visits": 6,
            "color": "#FF6600"
        },

    ],
    "valueAxes": [{ 
         "position": "left", 
         "title": "Visitors" 
    }], 
    "graphs": [{ 
         "balloonText": "[[category]]: <b>[[value]]</b>", 
         "fillColorsField": "color", 
         "valueAxis.dashLength": 5,
         "fillAlphas": 1, 
         "lineAlpha": 0.1, 
         "type": "column", 
         "valueField": "visits" 
    }], 
    "chartCursor": { 
        "categoryBalloonEnabled": false, 
        "cursorAlpha": 0, 
        "zoomable": false 
    }, 
    "categoryField": "country", 
    "categoryAxis": { 
        "categoryAxis.dashLength":100,
        "categoryAxis.gridPosition": "start",
        "gridPosition": "start",
        "autoGridCount": "true",
        "gridPosition": "start", 
        "autoGridCount": "true",
        "labelRotation": 90
    }, 
    "export": { 
        "enabled": true 
    } 
}); 
</script> 

<!-- HTML --> 
<div id="chartdiv"></div>

请查看图片以获得更清晰的信息。条215已创建,但不显示所有条形的字段值。

请建议我如何在条形码中获取所有x轴文字。

1 个答案:

答案 0 :(得分:2)

"minHorizontalGap": 0中添加"categoryAxis",如下所示:

"categoryAxis": { 
    "categoryAxis.dashLength":100,
    "categoryAxis.gridPosition": "start",
    "gridPosition": "start",
    "autoGridCount": "true",
    "gridPosition": "start", 
    "autoGridCount": "true",
    "labelRotation": 90,
    "minHorizontalGap": 0
}

默认间隙设置为75,这会导致标签无法被如此大量的标签看到。