解决javascript - AmCharts Gauge Balloon Tooltip
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
|
相关阅读排行
- 1JS 跳出iframe框架
- 2Dreamweaver CS6破解教程[序列号+破解补丁]
- 3ExtJs自学教程(1):一切从API开始
- 4《AngularJS》5个实例详解Directive(指令)机制
- 5document.getElementById()方法使用