javascript - Amcharts 未显示最高值的气球文本

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

如果没有空间，默认行为是不显示气球(3d 图表需要更多一点)。您可以通过设置 minMaxMultiplier 来解决此问题在你的值轴上减小一个小因子以增加值轴的最大值；你会想要强制 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和 rollOutGraphItem触发气球的事件。 AmCharts' knowledge base 中有一个这样的例子.