2021腾讯云限时秒杀，爆款1核2G云服务器298元/3年！（领取2860元代金券），
地址：https://cloud.tencent.com/act/cps/redirect?redirect=1062

2021阿里云最低价产品入口+领取代金券(老用户3折起)，
入口地址：https://www.aliyun.com/minisite/goods

How can I ad an balloon to an AmCharts Gauge? Is this not possible?

How can I add an balloon tooltip to the arrow showing the value in percent?

Copied the markup from AmChart docs. But only seems to work with regular charts and not gauges.

http://docs.amcharts.com/3/javascriptcharts/AmBalloon http://docs.amcharts.com/3/javascriptcharts/AmAngularGauge

http://jsfiddle.net/shL0g1rc/2/

Code Sample

var chart = AmCharts.makeChart("chartdiv", {
  "type": "gauge",
  "arrows": [
    {
      "value": 130
    }
  ],
  "titles": [
    {
      "text": "Speedometer",
      "size": 15
    }
  ],
  "axes": [
    {
      "bottomText": "0 km/h",
      "endValue": 220,
      "valueInterval": 10,
      "bands": [
        {
          "color": "#00CC00",
          "endValue": 90,
          "startValue": 0
        },
        {
          "color": "#ffac29",
          "endValue": 130,
          "startValue": 90
        },
        {
          "color": "#ea3838",
          "endValue": 220,
          "startValue": 130,
          "innerRadius": "95%"
        }
      ]
    }
  ],
  "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    "cornerRadius": 5,
    "fillColor": "#FFFFFF"
  }
});

javascript html5 graph charts amcharts
  |
  this question edited Aug 6 '15 at 12:03 asked Aug 6 '15 at 11:44 Manuel 2,866 5 27 47

---

---

 | 

1 Answers
1

解决方法

You can use balloonText on your gauge band to display the balloon.

You can also use "rendered" event, to dynamically update balloonText so it reflects the arrow values.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "gauge",
  "arrows": [
    {
      "value": 130,
      "title": "Speed"
    }
  ],
  "titles": [
    {
      "text": "Speedometer",
      "size": 15
    }
  ],
  "axes": [
    {
      "bottomText": "0 km/h",
      "endValue": 220,
      "valueInterval": 10,
      "bands": [
        {
          "color": "#00CC00",
          "endValue": 90,
          "startValue": 0,
          "balloonText": "Good"
        },
        {
          "color": "#ffac29",
          "endValue": 130,
          "startValue": 90,
          "balloonText": "Careful"
        },
        {
          "color": "#ea3838",
          "endValue": 220,
          "startValue": 130,
          "innerRadius": "95%",
          "balloonText": "Too Fast!"
        }
      ]
    }
  ],
  "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    "cornerRadius": 5,
    "fillColor": "#FFFFFF"
  },
  "listeners": [{
    "event": "rendered",
    "method": function(event) {
      var chart = event.chart;
      var text = "";
      for(var i = 0; i < chart.arrows.length; i++) {
        var arrow = chart.arrows[i];
        text += arrow.title + ": " + arrow.value + "<br />";
      }
      for(var i = 0; i < chart.axes[0].bands.length; i++) {
        chart.axes[0].bands[i].balloonText = text;
      }
    }
  }]
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/gauge.js"></script>
<div id="chartdiv"></div>

  |
  this answer edited Aug 6 '15 at 13:31 answered Aug 6 '15 at 11:57 martynasma 5,527 2 14 36      thx. I like to add the balloon tooltip to the arrow though. Is this possible too? –  Manuel Aug 6 '15 at 12:03      Hm, no I'm afraid. It would make a good feature though. I'll make sure it's in the TODO list for future version. We'll let you know when this is implemented. –  martynasma Aug 6 '15 at 13:15      Thx. I guess you send me an email in case its beeing implemented. Is it possible to show values for all arrows in the gauge axis balloon? –  Manuel Aug 6 '15 at 13:18      We will. Balloon contents is HTML, so you can put anything there. And you can update it dynamically. Let me update my answer. –  martynasma Aug 6 '15 at 13:21      Check updated answer. –  martynasma Aug 6 '15 at 13:31

---

---

 |