Amcharts - 计算和绘制变化率答案

【问题标题】：Amcharts - Calculate & plot rate of changeAmcharts - 计算和绘制变化率
【发布时间】：2016-01-27 03:28:03
【问题描述】：

我在折线图上有一组值，如下所示

数据跨越多年。上图中的输出来自数据库的 SQL 查询。我面临的挑战是在同一个图表上同时表示实际的页面点击数和增长率。p>

我将点击次数绘制为柱形图，点击次数为左侧的 Y 轴。我之前创建了一个多折线图和折线图组合。所以，也可以为此创建一个。但是，amcharts 有没有一种方法可以计算变化率，而无需我将其提取为 SQL 查询的另一个字段？

我希望看到 amcharts 绘制了一个折线图，表示右侧 Y 轴上的变化率。也非常感谢任何其他处理此问题的想法。

谜题的剩余部分

在上图中，“#EVENT”和“EVENT#-GROWTH RATE”都显示相同的值。我怎样才能让“事件# - 增长率”实际显示百分比变化（根据所附图片为 69%）而不是值？

以上输出来自萤火虫追踪。如图所示，2 个图表在 2 个不同的值轴上具有相同的“值”图，其中一个启用了百分比。

【问题讨论】：

标签： javascript amcharts

【解决方案1】：

您可以为此创建一个单独的图表和值轴。值轴有一个属性recalculateToPercents，当设置为true 时，将重新计算绝对值以百分比变化。

因此，您将拥有一个像现在这样的常规图表，以及一个单独的图表/价值轴二重奏来显示动态。

我认为一个工作示例可能会更好地说明这一点：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD",
  "valueAxes": [{
    "id": "v1",
    "position": "left",
    "minimum": 0,
    "maximum": 100
  }, {
    "id": "v2",
    "gridAlpha": 0,
    "position": "left",
    "offset": 60,
    "recalculateToPercents": true
  }],
  "graphs": [{
    "id": "g1",
    "bullet": "round",
    "lineThickness": 2,
    "title": "Absolute values",
    "valueField": "value",
    "valueAxis": "v1"
  }, {
    "id": "g1",
    "bullet": "round",
    "lineThickness": 2,
    "title": "Change values",
    "valueField": "value",
    "valueAxis": "v2",
    "showBalloon": false
  }],
  "legend": {
    "valueText": ""
  },
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true
  },
  "dataProvider": [ {
    "date": "2013-01-02",
    "value": 67
  }, {
    "date": "2013-01-03",
    "value": 64
  }, {
    "date": "2013-01-04",
    "value": 66
  }, {
    "date": "2013-01-05",
    "value": 60
  }, {
    "date": "2013-01-06",
    "value": 63
  }, {
    "date": "2013-01-07",
    "value": 61
  }, {
    "date": "2013-01-08",
    "value": 60
  }, {
    "date": "2013-01-09",
    "value": 65
  }, {
    "date": "2013-01-10",
    "value": 75
  }, {
    "date": "2013-01-11",
    "value": 77
  }, {
    "date": "2013-01-12",
    "value": 78
  }, {
    "date": "2013-01-13",
    "value": 70
  }, {
    "date": "2013-01-14",
    "value": 70
  }, {
    "date": "2013-01-15",
    "value": 73
  }, {
    "date": "2013-01-16",
    "value": 71
  }, {
    "date": "2013-01-17",
    "value": 74
  }, {
    "date": "2013-01-18",
    "value": 78
  }, {
    "date": "2013-01-19",
    "value": 85
  }, {
    "date": "2013-01-20",
    "value": 82
  }, {
    "date": "2013-01-21",
    "value": 83
  }, {
    "date": "2013-01-22",
    "value": 88
  }, {
    "date": "2013-01-23",
    "value": 85
  }, {
    "date": "2013-01-24",
    "value": 85
  }, {
    "date": "2013-01-25",
    "value": 80
  }, {
    "date": "2013-01-26",
    "value": 87
  }, {
    "date": "2013-01-27",
    "value": 84
  }, {
    "date": "2013-01-28",
    "value": 83
  }, {
    "date": "2013-01-29",
    "value": 84
  }, {
    "date": "2013-01-30",
    "value": 81
  }]
});

<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="width: 100%; height: 300px;"></div>

您会注意到两个图表使用相同的valueField。

上述解决方案将计算到第一个值的变化。

如果您需要从任何先前的数据点计算更改，则需要对数据进行预处理。

我们可以使用AmCharts.addInitHandler() 方法来指定自定义函数，该函数将在图表初始化之前被调用，因此我们可以对其进行一些最后的修改和计算。

以下解决方案将使用它在图表中查找专有设置recalculate，并自动重新计算其绝对数据值以百分比变化。

需要说，如果您的数据包含至少一个零值，这将不起作用，因为没有办法计算从零开始的百分比变化。

AmCharts.addInitHandler(function(chart) {
  
  // look for graphs that need to be recalculated
  var graphs = [];
  for(var i = 0; i < chart.graphs.length; i++) {
    var graph = chart.graphs[i];
    if (graph.recalculate === true) {
      graph.originalValueField = graph.valueField;
      graph.valueField = graph.valueField + "Change";
      graphs.push(graph);
    }
  }
  
  // calculate the data
  var prev = [];
  for(var i = 0; i < chart.dataProvider.length; i++) {
    var dp = chart.dataProvider[i];
 
    for(var g = 0; g < graphs.length; g++) {
      var graph = graphs[g];
            
      // ignore empty data points
      if(isNaN(dp[graph.originalValueField]))
        continue;
      
      // handle first data point
      if(prev[g] === undefined) {
        prev[g] = dp[graph.originalValueField];
      }
      
      // calculate the change
      var change = dp[graph.originalValueField] - prev[0];
      dp[graph.valueField] = Math.round( change / prev[0] * 10000) / 100;
      
      // assign previous value
      prev[g] = dp[graph.originalValueField];
        
    }
  }
  
  console.log(chart.dataProvider);
  
}, ["serial"]);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD",
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }, {
    "id": "v2",
    "gridAlpha": 0,
    "position": "left",
    "offset": 60,
    "unit": "%"
  }],
  "graphs": [{
    "id": "g1",
    "bullet": "round",
    "lineThickness": 2,
    "title": "Absolute values",
    "valueField": "value",
    "valueAxis": "v1"
  }, {
    "id": "g2",
    "bullet": "round",
    "lineThickness": 2,
    "title": "Change values",
    "valueField": "value",
    "valueAxis": "v2",
    "recalculate": true,
    "balloonText": "[[value]]%"
  }],
  "legend": {
    "valueText": ""
  },
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true
  },
  "dataProvider": [ {
    "date": "2013-01-02",
    "value": 67
  }, {
    "date": "2013-01-03",
    "value": 64
  }, {
    "date": "2013-01-04",
    "value": 66
  }, {
    "date": "2013-01-05",
    "value": 60
  }, {
    "date": "2013-01-06",
    "value": 63
  }, {
    "date": "2013-01-07",
    "value": 61
  }, {
    "date": "2013-01-08",
    "value": 60
  }, {
    "date": "2013-01-09",
    "value": 65
  }, {
    "date": "2013-01-10",
    "value": 75
  }, {
    "date": "2013-01-11",
    "value": 77
  }, {
    "date": "2013-01-12",
    "value": 78
  }, {
    "date": "2013-01-13",
    "value": 70
  }, {
    "date": "2013-01-14",
    "value": 70
  }, {
    "date": "2013-01-15",
    "value": 73
  }, {
    "date": "2013-01-16",
    "value": 71
  }, {
    "date": "2013-01-17",
    "value": 74
  }, {
    "date": "2013-01-18",
    "value": 78
  }, {
    "date": "2013-01-19",
    "value": 85
  }, {
    "date": "2013-01-20",
    "value": 82
  }, {
    "date": "2013-01-21",
    "value": 83
  }, {
    "date": "2013-01-22",
    "value": 88
  }, {
    "date": "2013-01-23",
    "value": 85
  }, {
    "date": "2013-01-24",
    "value": 85
  }, {
    "date": "2013-01-25",
    "value": 80
  }, {
    "date": "2013-01-26",
    "value": 87
  }, {
    "date": "2013-01-27",
    "value": 84
  }, {
    "date": "2013-01-28",
    "value": 83
  }, {
    "date": "2013-01-29",
    "value": 84
  }, {
    "date": "2013-01-30",
    "value": 81
  }]
});

<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="width: 100%; height: 300px;"></div>

【讨论】：

谢谢玛蒂娜。只是一个观察 - 整个图表的变化率是相对于图表中的第一个点。是否有可能获得相对于前一点而不是第一点的变化率？
没有这样的内置功能。但是，这可以通过对数据进行预处理来实现。我将使用该选项更新我的答案。
我还有最后一个问题要解决。我已经更新了“谜题的剩余部分”标题下的问题。你能帮我弄清楚吗？
我的示例将数据重新计算为绝对值的百分位数，因此它应该在图例中显示。您能否分享您当前的图表代码，以便我看一下？
非常感谢Martyna。我必须绘制图形的代码不是直截了当的。它不像你的例子。有许多函数可以读取一个值数组并将其解析为一个图形对象，然后绘制该图形对象。所以，我用“Valueaxes”的截图和有问题的两个图表更新了这个问题（显示原始数据的图表和应该显示百分比变化的图表）。这些对你有帮助吗？