amcharts第3版如何绘制两个值的变化值

Question

我有三个值的数组：

• 估计值
• 实际值
• 它们之间的区别

我正在使用 amcharts 版本 3 库绘制平滑折线图。 我想画出两条线之间的变化值。

例如：

如果估计值为 3，实际值为 5，则变化为 -2，所以我想将差值绘制为绿色。其他情况下为红色。

图片作为我想要的输出附加。

我看到了所有可用的 amcharts 演示，但没有找到我的匹配项。 如果有人帮助我获得线索，请提供我使用演示数据。

Answer 1

我对 amcharts 不是很熟悉，所以样式不是很好。
但是为了在行之间添加列...

首先，这些线需要在同一个值轴上。
否则，由于两个不同的比例，该列的大小将不正确。

接下来是数据。我们将需要三个堆叠列系列。
一个用于底部透明部分。
另一个为红色，另一个为绿色。

在这里，我将数据保存在一个单独的变量中。

var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];

然后使用map 方法计算三列的差值或值。

'dataProvider': chartData.map(function (row) {
  if (row.ActualValue >= row.EstimatedValue) {
    row.difference0 = row.EstimatedValue;
    row.difference1 = row.ActualValue - row.EstimatedValue;
    row.difference2 = 0;
  } else {
    row.difference0 = row.ActualValue;
    row.difference1 = 0;
    row.difference2 = row.EstimatedValue - row.ActualValue;
  }
  return row;
}),

请参阅以下工作 sn-p...

$(document).ready(function() {
  var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];

  var AverageAnalystEstimatesChart;
  AverageAnalystEstimatesChartgraphCounter = 2;
  AverageAnalystEstimatesChart = AmCharts.makeChart('AverageAnalystEstimatesChart', {
    'type': 'serial',
    'dataProvider': chartData.map(function (row) {
      if (row.ActualValue >= row.EstimatedValue) {
        row.difference0 = row.EstimatedValue;
        row.difference1 = row.ActualValue - row.EstimatedValue;
        row.difference2 = 0;
      } else {
        row.difference0 = row.ActualValue;
        row.difference1 = 0;
        row.difference2 = row.EstimatedValue - row.ActualValue;
      }
      return row;
    }),
    'valueAxes': [{
      'id':'v1',
      'position': 'left',
      'inside':false,
      'autoGridCount' :false,
      'labelOffset': 15,
      'minHorizontalGap' : 100,
      'gridCount' : 8,
      'minimum': 0
    },{
      'id':'v6',
      'position': 'right',
      'inside':false,
      'autoGridCount' :false,
      'labelOffset': 15,
      'minHorizontalGap' : 100,
      'gridCount' : 8,
    },{
      'id':'v5',
      'position': 'left',
      'inside':false,
      'labelOffset': 15,
      'autoGridCount' :false,
      'gridThickness': 0,
    },{
      'id':'v3',
      'position': 'left',
      'inside':true,
      'labelOffset' : 15,
      'minHorizontalGap' : 120,
      'minVerticalGap' : 50,
      'autoGridCount' :false,
      'gridThickness': 0,
      'showFirstLabel' : false
    },{
      'id':'v4',
      'position': 'left',
      'inside':false,
      'labelOffset': 15,
      'autoGridCount' :false,
      'gridCount' : 8,
      'minimum': 0
    },{
      'id':'v7',
      'position': 'left',
      'inside':false,
      'labelOffset': 15,
      'autoGridCount' :false,
      'gridCount' : 8,
      'minimum': 0,
      'stackType': 'regular'
    }],
    'numberFormatter': {
      'precision': 2,
      'decimalSeparator': '.',
      'thousandsSeparator': ''
    },
    'categoryField': 'FiscalPeriod',
    'graphs': [{
      'id': 'g0',
      'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
      'bullet': 'round',
      'bulletSize': 0,
      'lineColor': '#7CB5EC',
      'lineThickness': 3,
      'negativeLineColor': '#7CB5EC',
      'type': 'smoothedLine',
      'valueField': 'ActualValue',
      'title': 'Actual Value',
      'valueAxis': 'v4'
    },{
      'id': 'g1',
      'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
      'bullet': 'round',
      'bulletSize': 0,
      'lineColor': '#EE7B0A',
      'lineThickness': 3,
      'negativeLineColor': '#EE7B0A',
      'type': 'smoothedLine',
      'valueField': 'EstimatedValue',
      'title': 'Estimated Value',
      'valueAxis': 'v4'
    },{
      'id': 'g2',
      'balloonText': '',
      'fillAlphas': 0,
      'lineThickness': 0,
      'type': 'column',
      'valueField': 'difference0',
      'title': '',
      'valueAxis': 'v7'
    },{
      'id': 'g3',
      'balloonText': '',
      'lineColor': 'green',
      'fillAlphas': 1,
      'type': 'column',
      'valueField': 'difference1',
      'title': 'Difference',
      'valueAxis': 'v7'
    },{
      'id': 'g4',
      'balloonText': '',
      'lineColor': 'red',
      'fillAlphas': 1,
      'type': 'column',
      'valueField': 'difference2',
      'title': 'Difference',
      'valueAxis': 'v7'
    }],
    'chartCursor': {
      'categoryBalloonDateFormat': 'DD-MM-YYYY',
      'cursorAlpha': 0,
      'valueLineEnabled': true,
      'valueLineBalloonEnabled': true,
      'valueLineAlpha': 0.5,
      'categoryBalloonColor': '#E2EEF6',
      'color': '#000'
    },
    'categoryAxis': {
      'parseDates': false,
      'minHorizontalGap':110,
      'axisColor': '#fff','labelRotation': 45,'minorGridEnabled': true,'autoGridCount': false,'gridCount':8 , 'labelOffset' : 10
    },
    'legend': {
      'position': 'bottom',
      'equalWidths': false,
      'useGraphSettings': true,
      'valueAlign': 'middle',
      'valueWidth': 300
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>

<div id="AverageAnalystEstimatesChart" style="width: 100%; height: 362px;"></div>