【问题标题】:bar chart some x axis values missing in amchart条形图 amchart 中缺少一些 x 轴值
【发布时间】:2018-01-10 07:15:19
【问题描述】:

在 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 已创建,但未显示所有条的字段值。

请建议我如何获取 bar 中的所有 x 轴文本。

【问题讨论】:

  • 你说,我们应该“找图”,但是如果没有图,我们应该怎么“找图”呢?
  • 对不起Geshode,我已经更新了图片链接。 i.stack.imgur.com/RyeZf.png
  • 尝试在 div 类中添加水平滚动条
  • 对不起,我需要不带滚动条的图表@Binara

标签: html json amcharts


【解决方案1】:

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

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

默认gap设置为75,导致这么多标签看不到标签。

【讨论】:

  • 谢谢,现在它显示了所有的值。但看起来文本是重叠的。有没有办法在文本之间留出空间。为了更清楚,我将附上这个问题的图片链接。
  • 您可以将 "minHorizontalGap" 设置为大于 0 的数字,然后查看在哪个设置下它看起来是您想要的样子。
  • 如果解决了你的问题,请选择答案,这样问题就可以结束了。
  • ya ,它几乎解决了我的问题。但是在将“minHorizo​​ntalGap”设置为大于 0 的数字后,一些 x 轴值再次丢失,我猜是因为空间问题。有什么办法可以减小文字大小?
  • 要更改轴的字体大小,您可以像添加“minHorizo​​ntalGap”一样添加“fontSize”,然后输入您想要的数字。也许有必要尝试一些设置以找到最适合您的设置。
猜你喜欢
  • 2022-09-17
  • 1970-01-01
  • 1970-01-01
  • 2020-04-20
  • 1970-01-01
  • 2021-07-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多