AmCharts Gauge Balloon Tooltip

Question

如何向AmCharts Gauge广告气球？ 这不可能吗？

如何在显示百分比值的箭头中添加气球工具提示？

从AmChart文档中复制标记。但似乎只能使用常规图表而不是计量表。

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

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

代码示例

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"
  }
});

Answer 1

您可以在标尺带上使用balloonText来显示气球。

你也可以使用＆＃34;渲染＆＃34;事件，动态更新balloonText，使其反映箭头值。

＆＃13;

＆＃13;

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;
      }
    }
  }]
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;