在保持值点的同时将两点注释之间的百分比变化添加到图表

Question

我有以下图表计算每个月的保费。

<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>

结果：

目前图表正确显示了每个月的保费。但是，我想添加一个注释来计算每两个点之间的百分比变化。

示例输出：

谢谢

Answer 1

为 setColumns、
使用计算列时您可以使用自定义函数，而不是 calc: "stringify"

该函数将接收两个参数，
数据 table 和行索引。
该函数应该 return 要显示的值（注释）。

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>

在保持值点的同时将两点注释之间的百分比变化添加到图表

Add percentage change between two points annotation to chart while maintaining value points

charts

google-visualization