Как нарисовать изменение значения двух значений в версии 3 - PullRequest
Новая
       24

Как нарисовать изменение значения двух значений в версии 3

1 голос
/ 15 января 2020

У меня есть массив из трех значений:

  • Расчетное значение
  • Фактическое значение
  • Разница между ними

Я рисую график гладкой линии с использованием библиотеки amcharts версии 3. Я хочу нарисовать значение изменения между двумя строками.

Например:

Если оценочное значение равно 3, а фактическое значение равно 5, тогда изменение равно -2, поэтому я хочу нарисовать разница как зеленая. И красный в другом состоянии.

Пи c присоединен как мой желаемый вывод.

Я видел все доступные демоверсии amcharts, но не нашел своего соответствия. Пожалуйста, если кто-нибудь поможет мне получить подсказки, предоставьте мне, используя демонстрационные данные.

enter image description here

1 Ответ

1 голос
/ 16 января 2020

Я не очень хорошо знаком с амхартами, поэтому стиль не очень хорош.
, но для того, чтобы добавить столбцы между строками ...

, сначала нужно будет находиться на одной оси значений.
в противном случае столбец будет иметь неправильный размер из-за двух разных масштабов.

далее, данные. нам понадобится три ряда столбцов.
один для нижней, прозрачной части.
другой для красного и другого зеленого.

здесь я сохраняю данные в отдельной переменной. 

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;
}),

см. Следующий рабочий фрагмент ... 

$(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>
...