在错误 amchart 的上下点的鼠标悬停时显示单独的工具提示（top/middle/bottom）

Question

我正在使用错误 amchart，所以我想在鼠标悬停在每个错误字段的顶部错误、中间错误和底部错误时显示气球（工具提示）。鼠标离开时隐藏。以下是报错 amchart link https://www.amcharts.com/demos/error-chart/

Answer 1

我不确定这是不是你要求的。

您可以使用 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。

Answer 2

您可以通过添加一些自定义代码来解决此问题，这些代码会为顶部和底部错误值创建单独的图表。您将需要三张图，因为图表每张图只显示一个气球。

这里有一个快速的 "plugin" 我突然想到它会自动执行此操作：

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

在错误 amchart 的上下点的鼠标悬停时显示单独的工具提示（top/middle/bottom）

Show separate tooltip(top/middle/bottom) on mouseover of upper and lower point of error amchart

amcharts