在錯誤的上下點鼠標懸停上顯示單獨的工具提示（頂部/中間/底部）amchart

Question

我正在使用錯誤amchart，所以我想顯示在各自的頂部錯誤，中間錯誤和底部錯誤的鼠標懸停上的ballon（tooltip）錯誤字段。隱藏鼠標離開。以下是錯誤amchart鏈接https://www.amcharts.com/demos/error-chart/

Answer 1

您可以通過添加一些自定義代碼來解決此問題，該代碼爲頂部和底部錯誤值創建單獨的圖。您將需要三個圖表，因爲圖表每個圖表只會顯示一個氣球。

這裏有一個快速的「插件」我颳起了，做自動：

/** 
* amCharts plugin: show three balloons for each error data point 
* The plugin expects "showAllBalloons" to be set to true for the graph 
* you want this to be applied to 
*/ 
AmCharts.addInitHandler(function(chart) { 

    // find graphs that need to be augmented with additional balloons 
    for(var i = 0; i < chart.graphs.length; i++) { 
    var g = chart.graphs[i]; 
    if (g.showAllBalloons === true) { 
     for(var x = 0; x < chart.dataProvider.length; x++) { 
     var dp = chart.dataProvider[x]; 
     var value = dp[g.valueField]; 
     var error = dp[g.errorField]; 
     dp[g.valueField + "Top"] = value + error/2; 
     dp[g.valueField + "Bottom"] = value - error/2; 
     } 

     // add additional graph for top and bottom values 
     var graph = new AmCharts.AmGraph(); 
     graph.valueField = g.valueField + "Top"; 
     graph.lineColor = g.lineColor; 
     graph.visibleInLegend = false; 
     graph.lineAlpha = 0; 
     chart.addGraph(graph); 

     var graph = new AmCharts.AmGraph(); 
     graph.valueField = g.valueField + "Bottom"; 
     graph.lineColor = g.lineColor; 
     graph.visibleInLegend = false; 
     graph.lineAlpha = 0; 
     chart.addGraph(graph); 
    } 
    } 

}, ["serial"]); 

這裏是一個完整的工作代碼：

/** 
 
* amCharts plugin: show three balloons for each error data point 
 
* The plugin expects "showAllBalloons" to be set to true for the graph 
 
* you want this to be applied to 
 
*/ 
 
AmCharts.addInitHandler(function(chart) { 
 
    
 
    // find graphs that need to be augmented with additional balloons 
 
    for(var i = 0; i < chart.graphs.length; i++) { 
 
    var g = chart.graphs[i]; 
 
    if (g.showAllBalloons === true) { 
 
     for(var x = 0; x < chart.dataProvider.length; x++) { 
 
     var dp = chart.dataProvider[x]; 
 
     var value = dp[g.valueField]; 
 
     var error = dp[g.errorField]; 
 
     dp[g.valueField + "Top"] = value + error/2; 
 
     dp[g.valueField + "Bottom"] = value - error/2; 
 
     } 
 
     
 
     // add additional graph for top and bottom values 
 
     var graph = new AmCharts.AmGraph(); 
 
     graph.valueField = g.valueField + "Top"; 
 
     graph.lineColor = g.lineColor; 
 
     graph.visibleInLegend = false; 
 
     graph.lineAlpha = 0; 
 
     chart.addGraph(graph); 
 
     
 
     var graph = new AmCharts.AmGraph(); 
 
     graph.valueField = g.valueField + "Bottom"; 
 
     graph.lineColor = g.lineColor; 
 
     graph.visibleInLegend = false; 
 
     graph.lineAlpha = 0; 
 
     chart.addGraph(graph); 
 
    } 
 
    } 
 
    
 
}, ["serial"]); 
 

 
var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "dataProvider": [ { 
 
    "year": 2005, 
 
    "value": 11.5, 
 
    "error": 10 
 
    }, { 
 
    "year": 2006, 
 
    "value": 26.2, 
 
    "error": 5 
 
    }, { 
 
    "year": 2007, 
 
    "value": 30.1, 
 
    "error": 5 
 
    }, { 
 
    "year": 2008, 
 
    "value": 29.5, 
 
    "error": 7 
 
    }, { 
 
    "year": 2009, 
 
    "value": 24.6, 
 
    "error": 10 
 
    } ], 
 
    "balloon": { 
 
    "textAlign": "left" 
 
    }, 
 
    "valueAxes": [ { 
 
    "id": "v1", 
 
    "axisAlpha": 0 
 
    } ], 
 
    "startDuration": 1, 
 
    "graphs": [ { 
 
    "balloonText": "value:<b>[[value]]</b><br>error:<b>[[error]]</b>", 
 
    "bullet": "yError", 
 
    "bulletSize": 10, 
 
    "lineColor": "#67b7dc", 
 
    "errorField": "error", 
 
    "lineThickness": 2, 
 
    "valueField": "value", 
 
    "bulletAxis": "v1", 
 
    "fillAlphas": 0, 
 
    "showAllBalloons": true 
 
    }, { 
 
    "bullet": "round", 
 
    "bulletBorderAlpha": 1, 
 
    "bulletBorderColor": "#FFFFFF", 
 
    "lineAlpha": 0, 
 
    "lineThickness": 2, 
 
    "showBalloon": false, 
 
    "valueField": "value" 
 
    } ], 
 
    "chartCursor": { 
 
    "cursorAlpha": 0, 
 
    "cursorPosition": "mouse", 
 
    "graphBulletSize": 1, 
 
    "zoomable": false 
 
    }, 
 
    "categoryField": "year", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "axisAlpha": 0 
 
    } 
 
});

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv" style="height: 300px;"></div>

Answer 2

我不確定這是否是您要求的。您可以使用balloonFunction更改氣球的文字。

"graphs": [ { 
    "balloonFunction": function(item) { 
     var data = item.dataContext; 
     return "high:<b>" + (data.value + data.error) 
      + "</b><br>low:<b>" + (data.value - data.error) 
      + "</b><br>value:<b>" + data.value 
      + "</b><br>error:<b>" + data.error + "</b>"; 
    } 
[ 

看看這個demo。