画一条线以指示 Amcharts 中的最大值

Question

我正在绘制一个包含大量数据的图表。一天 96 个地块，用户最多可以获取 62 天的数据。我正在使用 Amcharts 来实现相同的功能。我需要向用户显示一条针对图表最高值的线。如果 Amcharts 提供了在图表上显示最大值的功能，有人可以帮助我吗？因为如果不这样做，我将不得不重复整个对象，只是为了在每个 json 数组中插入最大值，这似乎不是一个好主意。

谢谢

Answer 1

无需遍历所有数据。当图表自行构建时，它无论如何都会计算每个值轴的最小值和最大值。我们可以利用这些自动计算的值并为每个值添加指南。

我们可以使用图表的 "rendered" 事件来完成。当此事件发生时，我们知道图表已构建，因此计算了最小值和最大值。

值轴对象将包含我们将使用的 maxReal 和 minReal 属性。我们将为这些值添加 Guide 以指示最高点和最低点。

以下是代码查找它的方式：

chart.addListener( "rendered", function( event ) {
  // get chart and value axis
  var chart = event.chart;
  var axis = chart.valueAxes[0];

  // create max guide
  var guide = new AmCharts.Guide();
  guide.value = guide.label = axis.maxReal;
  guide.lineAlpha = 0.2;
  guide.lineThickness = 2;
  guide.lineColor = guide.color = "#00cc00";
  axis.addGuide( guide );

  // create min guide
  var guide = new AmCharts.Guide();
  guide.value = guide.label = axis.minReal;
  guide.lineAlpha = 0.2;
  guide.lineThickness = 2;
  guide.lineColor = guide.color = "#cc0000";
  axis.addGuide( guide );
} );

这里是图表的完整工作代码：

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "path": "http://www.amcharts.com/lib/3/",
  "dataProvider": [ {
    "year": "1969",
    "value": -0.011
  }, {
    "year": "1970",
    "value": -0.068
  }, {
    "year": "1971",
    "value": -0.19
  }, {
    "year": "1972",
    "value": -0.056
  }, {
    "year": "1973",
    "value": 0.077
  }, {
    "year": "1974",
    "value": -0.213
  }, {
    "year": "1975",
    "value": -0.17
  }, {
    "year": "1976",
    "value": -0.254
  }, {
    "year": "1977",
    "value": 0.019
  }, {
    "year": "1978",
    "value": -0.063
  }, {
    "year": "1979",
    "value": 0.05
  }, {
    "year": "1980",
    "value": 0.077
  }, {
    "year": "1981",
    "value": 0.12
  }, {
    "year": "1982",
    "value": 0.011
  }, {
    "year": "1983",
    "value": 0.177
  }, {
    "year": "1984",
    "value": -0.021
  }, {
    "year": "1985",
    "value": -0.037
  }, {
    "year": "1986",
    "value": 0.03
  }, {
    "year": "1987",
    "value": 0.179
  }, {
    "year": "1988",
    "value": 0.18
  }, {
    "year": "1989",
    "value": 0.104
  }, {
    "year": "1990",
    "value": 0.255
  }, {
    "year": "1991",
    "value": 0.21
  }, {
    "year": "1992",
    "value": 0.065
  }, {
    "year": "1993",
    "value": 0.11
  }, {
    "year": "1994",
    "value": 0.172
  }, {
    "year": "1995",
    "value": 0.269
  }, {
    "year": "1996",
    "value": 0.141
  }, {
    "year": "1997",
    "value": 0.353
  }, {
    "year": "1998",
    "value": 0.548
  }, {
    "year": "1999",
    "value": 0.298
  }, {
    "year": "2000",
    "value": 0.267
  }, {
    "year": "2001",
    "value": 0.411
  }, {
    "year": "2002",
    "value": 0.462
  }, {
    "year": "2003",
    "value": 0.47
  }, {
    "year": "2004",
    "value": 0.445
  }, {
    "year": "2005",
    "value": 0.47
  } ],
  "valueAxes": [ {
  } ],
  "graphs": [ {
    "id": "g1",
    "bullet": "round",
    "lineColor": "#d1655d",
    "lineThickness": 2,
    "negativeLineColor": "#637bb6",
    "valueField": "value",
    "bulletField": "bullet-g1",
    "labelText": "[[label-g1]]"
  } ],
  "chartCursor": {
    "categoryBalloonDateFormat": "YYYY",
    "zoomable": false
  },
  "dataDateFormat": "YYYY",
  "categoryField": "year",
  "categoryAxis": {
    "minPeriod": "YYYY",
    "parseDates": true,
    "minorGridAlpha": 0.1,
    "minorGridEnabled": true
  }
} );

chart.addListener( "rendered", function( event ) {
  // get chart and value axis
  var chart = event.chart;
  var axis = chart.valueAxes[0];
  
  // create max guide
  var guide = new AmCharts.Guide();
  guide.value = guide.label = axis.maxReal;
  guide.lineAlpha = 0.2;
  guide.lineThickness = 2;
  guide.lineColor = guide.color = "#00cc00";
  axis.addGuide( guide );
  
  // create min guide
  var guide = new AmCharts.Guide();
  guide.value = guide.label = axis.minReal;
  guide.lineAlpha = 0.2;
  guide.lineThickness = 2;
  guide.lineColor = guide.color = "#cc0000";
  axis.addGuide( guide );
} );

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

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

画一条线以指示 Amcharts 中的最大值

Draw a line against to indicate the max value in Amcharts

javascript

charts

json

amcharts