Question

我有一个脚本来显示Google Chart的时间表，但我无法修改它以显示差异图表。

我只能计算两个值之间的差异并显示它，而不是总数。我有[12,3000,2500]，[15,4700,5800] 第一个值是时间，然后第二个值是团队X和第三个值团队Y.我想显示：

在时间12，X队比X队多500人。
在时间15，Y队比X队多1100人。

非常感谢，添

＆＃13;

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLineColors);

function drawLineColors() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Blue Team');
      data.addColumn('number', 'Red Team');
			
      data.addRows([
        [0, 0, 0],     [3, 1700, 1600],   [6, 1800, 1700],    [9, 2500, 2423], 
        [12, 3000, 2500],  [15, 4700, 5800], 
        [18, 5200, 5900],  [21, 5500, 6000], 
        [24, 6000, 6200],  [27, 6800, 6700], 
        [30, 7500, 7000],  [33, 7800, 8200],
        [36, 7900, 9756],  [39, 8000, 10752], 
        [42, 9000, 13753],  [45, 15000, 17845],
		[48, 19000, 13753],  [55, 25000, 17845]
      ]);

      var options = {
     
   			lineWidth: 5,
      	animation:{
          duration: 5000,
          easing: 'in',
          startup : true
      	},
        legend : {
        	position : 'top'
        },
        //fontName : 'Shentox 7',
        enableInteractivity:false,
        width: 712,
      	height: 156,
        backgroundColor : {fill:'transparent'},
        curveType: 'function',
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Team Gold'
        },
        chartArea:{width:'72px',height:'126px'},
        colors: ['#FF0000', '#0000FF']
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

＆＃13;

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

＆＃13;

Answer 1

您可以使用DataView.setColumns为列值提供公式

然后使用DataView绘制chart

请参阅以下工作代码段...

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLineColors);

function drawLineColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Blue Team');
  data.addColumn('number', 'Red Team');
  data.addRows([
    [0, 0, 0], [3, 1700, 1600],
    [6, 1800, 1700], [9, 2500, 2423],
    [12, 3000, 2500], [15, 4700, 5800],
    [18, 5200, 5900], [21, 5500, 6000],
    [24, 6000, 6200], [27, 6800, 6700],
    [30, 7500, 7000], [33, 7800, 8200],
    [36, 7900, 9756], [39, 8000, 10752],
    [42, 9000, 13753], [45, 15000, 17845],
    [48, 19000, 13753], [55, 25000, 17845]
  ]);

  var options = {
    lineWidth: 5,
    animation:{
      duration: 5000,
      easing: 'in',
      startup : true
    },
    legend : {
      position : 'top'
    },
    enableInteractivity:false,
    width: 712,
    height: 156,
    backgroundColor : {fill:'transparent'},
    curveType: 'function',
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Team Gold'
    },
    chartArea:{width:'72px',height:'126px'},
    colors: ['#FF0000', '#0000FF']
  };

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([0, {
    calc: function (data, row) {
      return data.getValue(row, 2) - data.getValue(row, 1);
    },
    type: 'number',
    label: 'Variance'
  }]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, options);
}

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

谷歌图表：如何制作差异时间表

1 个答案: