Amcharts 不显示最高值的 balloonText

Question

我正在使用 Amcharts 插件中的 3D 堆积柱形图。输出正确但无法在条形图上查看最高值。

当我尝试将鼠标悬停在最高值上时，标签未显示。下面是 amcharts 脚本。

var chart = AmCharts.makeChart("chartdiv", {
            "theme": "light",
            "labelText": "[[title]]: [[value]]",
            "type": "serial",
            "titles": [{
                "text": "Benches Classification by Borough",
                "size": 16
            }],
            "valueAxes": [{
                "stackType": "3d",
                "unit": "",
                "position": "left",
                "title": "Bench Counts:",
            }],
            "startDuration": 1,
            "graphs": [
            {
                "balloonText": "backless : [[value]]",
                "fillAlphas": 0.9,
                "lineAlpha": 0.2,
                "title": "backless",
                "type": "column",
                "valueField": "backless"
            },
            {
                "balloonText": "backed:[[value]]",
                "fillAlphas": 0.9,
                "lineAlpha": 0.2,
                "title": "backed",
                "type": "column",
                "valueField": "backed"
            }],

            "plotAreaFillAlphas": 0.1,
            "depth3D": 73,
            "angle": 60,
            "categoryField": "Borough",
            "categoryAxis": {
                "gridPosition": "start"
            },
            "export": {
                "enabled": true
            }
        });

Answer 1

标签可能在视图之外。您可以右键单击以检查图表以查看标签是否存在。

尝试在顶部添加一些边距？

chart.marginTop = 20;

Answer 2

默认行为是在没有空间的情况下不显示气球（3d 图表更需要）。如果您的数据始终为正以避免负轴，您可以通过将 minMaxMultiplier in your value axis to small factor to increase the maximum of the value axis; you'll want to force the minimum 设置为 0 来解决此问题。

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "labelText": "[[title]]: [[value]]",
  "type": "serial",
  "dataProvider": [{
      "backed": 113,
      "backless": 56,
      "Borough": "Manhattan"
    },
    {
      "backed": 190,
      "backless": 64,
      "Borough": "Bronx"
    },
    {
      "backed": 127,
      "backless": 38,
      "Borough": "Brooklyn"
    },
    {
      "backed": 135,
      "backless": 50,
      "Borough": "Queens"
    },
    {
      "backed": 105,
      "backless": 31,
      "Borough": "Staten Island"
    }
    //Lower Manhattan is not a separate borough ;)
  ],
  "titles": [{
    "text": "Benches Classification by Borough",
    "size": 16
  }],
  "valueAxes": [{
    "stackType": "3d",
    "unit": "",
    "position": "left",
    "title": "Bench Counts:",
    "minMaxMultiplier": 1.05,
    "minimum": 0
  }],
  "startDuration": 1,
  "graphs": [{
      "balloonText": "backless : [[value]]",
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "backless",
      "type": "column",
      "valueField": "backless"
    },
    {
      "balloonText": "backed:[[value]]",
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "title": "backed",
      "type": "column",
      "valueField": "backed"
    }
  ],

  "plotAreaFillAlphas": 0.1,
  "depth3D": 73,
  "angle": 60,
  "categoryField": "Borough",
  "categoryAxis": {
    "gridPosition": "start"
  },
  "export": {
    "enabled": true
  }
});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px"></div>

另一种方法是使用外部 div 创建您自己的气球并利用 rollOverGraphItem and rollOutGraphItem events to trigger the balloon. There's an example of this in AmCharts' knowledge base.

Amcharts 不显示最高值的 balloonText

Amcharts not showing balloonText of highest value

javascript

amcharts