2020腾讯云10周年活动，优惠非常大！（领取2860元代金券），
地址：https://cloud.tencent.com/act/cps/redirect?redirect=1040

2020阿里云最低价产品入口，含代金券(新老用户有优惠)，
地址：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

---

---

 |