ITKeyword,专注技术干货聚合推荐

注册 | 登录

解决javascript - AmCharts Gauge Balloon Tooltip

itPublisher 分享于

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

 | 


相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。