Блог

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

 <script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {



        var options = {
            title: 'Monthly Total Production',
            curveType: 'function',
            legend: { position: 'bottom' },
            height: 600,
            vAxis: {
                viewWindow: { min: 0 },
                format: 'currency',
            },




        };
        $.ajax({

            type: "POST",
            url: "url",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.LineChart($("#monthlyProductionChart")[0]);
                var view = new google.visualization.DataView(data);
                view.setColumns([0, 1, {
                    calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation"
                },]);
                chart.draw(view, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }


</script>
 

Результат:

В настоящее время на графике правильно отображается премия за каждый месяц. Однако я хочу добавить аннотацию, которая вычисляет процентное изменение между каждые двумя точками.

Пример вывода:

Спасибо

при использовании вычисляемого столбца для setColumns
вы можете использовать пользовательскую функцию вместо calc: "stringify"

функция получит два аргумента:
таблицу данных и индекс строки.
функция должна вернуть отображаемое значение (аннотацию).

 view.setColumns([0, 1, {
  calc: function (dt, row) {
    if (row > 0) {
      var valCur = dt.getValue(row, 1);
      var valPrev = dt.getValue(row - 1, 1);
      if (valPrev > 0) {
        return formatNumber.formatValue((valCur - valPrev) / valPrev);
      }
    }
    return null;
  },
  role: 'annotation',
  type: 'string'
}]);
 

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

 google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Value'],
    ['Jan', 10],
    ['Feb', 30],
    ['Mar', 45],
    ['Apr', 50],
    ['May', 55],
    ['Jun', 45]
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0%'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      if (row > 0) {
        var valCur = dt.getValue(row, 1);
        var valPrev = dt.getValue(row - 1, 1);
        if (valPrev > 0) {
          return formatNumber.formatValue((valCur - valPrev) / valPrev);
        }
      }
      return null;
    },
    role: 'annotation',
    type: 'string'
  }]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view);
}); 

 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>