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 на вашей калибровочной группы, чтобы отобразить шар.

Вы также можете использовать событие «rendered», чтобы динамически обновлять balloonText, чтобы отображать значения стрелок.

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>