从谷歌图表中的柱形图创建汇总表

Posted 2023-02-24

【中文标题】从谷歌图表中的柱形图创建汇总表

【英文标题】：Create summary table from column chart in Google Charts

【发布时间】：2020-05-27 10:01:22

【问题描述】：

我正在 Google Charts 中创建一个柱形图，并且我还想创建一个表格图表，显示基于列值的汇总数据，即。平均值、最小值、最大值、总数。

我已经在 drawchart 函数之外将它们声明为全局变量（初始化为 0），并且我已经在 drawchart 函数中分配了值（没有 var）：

function drawPower() 
   $.get("costs_daily.csv", function(csvString) 
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, onParseValue: $.csv.hooks.castToScalar);

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

      /// get min, max cost
      var range = data.getColumnRange(3);
      var n_rows = data.getNumberOfRows();

      function getSum(data, row) 
        var total = 0;
        for (i = 0; i < n_rows; i++)
          total = total + data.getValue(i, row);
        return total;
      

      totCost = getSum(data, 3);
      aveCost = totCost / n_rows;  
      minCost = range.min;
      maxCost = range.max; 

      var options = 
        title: 'Costs for last 30 days',
        titleTextStyle: color: 'grey', fontSize: 16,
        hAxis: title: 'Date', titleTextStyle: bold: false, italic: false, color: 'grey', slantedTextAngle: 90, textStyle: fontSize: 12,
        legend: position: 'top',
        vAxes:  
                0: title: 'Cost (p)', titleTextStyle: bold: false, italic: false, color: 'grey',
        ,
        focusTarget: 'category',
        intervals: color:'#000000',
                    textStyle:  color: 'none',
        series: 
            0: color: '#44AA99', type: 'bars',
            1: color: '#DDCC77', type: 'bars',
            2: 
                color: 'transparent',
                type: 'line',
                lineWidth: 0,
                pointSize: 0,
                enableInteractivity: false,
                visibleInLegend: false
            
        ,
        interpolateNulls: true,
        bar:  groupWidth: '75%' ,
        isStacked: true,
      ;

      var formatter = new google.visualization.NumberFormat(
        prefix: '£', fractionDigits: 2
      );
      formatter.format(data,1);
      formatter.format(data,2);
      formatter.format(data,3);

      var chart = new google.visualization.ComboChart(document.getElementById('power_div'));

      chart.draw(data, options);

   ,'text');

然后我创建了一个单独的函数来用这些值绘制一个表格：

function drawTable() 

    statsData = [
        ['Stat', 'Cost'],
        ['Average', aveCost],
        ['Minimum', minCost],
        ['Maximum', maxCost],
        ['Total', totCost]
    ];

    var stats = new google.visualization.arrayToDataTable(statsData);

    var options = 
        showRowNumber: false,
        width: '100%',
        height: '100%'
    ;

    var formatter = new google.visualization.NumberFormat(
        prefix: '£', fractionDigits: 2
      );
    formatter.format(stats,1);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(stats, options);

但是这些值保持在它们的初始化值（零）。有没有办法将图表函数的计算值传递给表格函数？

【问题讨论】：

你能把你的完整绘图功能贴出来吗？

添加了完整的绘图功能。

【参考方案1】：

不确定从现在开始在哪里调用 drawTable， 但是是的，您可以将图表函数中的值传递给表函数。

在图表函数中创建statsData， 然后将其传递给表函数。 并删除当前正在调用表函数的位置。

      totCost = getSum(data, 3);
      aveCost = totCost / n_rows;
      minCost = range.min;
      maxCost = range.max;

      statsData = [
          ['Stat', 'Cost'],
          ['Average', aveCost],
          ['Minimum', minCost],
          ['Maximum', maxCost],
          ['Total', totCost]
      ];

      drawTable(statsData);

      ...

function drawTable(statsData) 

    ...

请参阅以下 sn-p... 函数drawPower（） $.get("costs_daily.csv", function(csvString) // 将 CSV 字符串转换为二维数组 var arrayData = $.csv.toArrays(csvString, onParseValue: $.csv.hooks.castToScalar);

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

      /// get min, max cost
      var range = data.getColumnRange(3);
      var n_rows = data.getNumberOfRows();

      function getSum(data, row) 
        var total = 0;
        for (i = 0; i < n_rows; i++)
          total = total + data.getValue(i, row);
        return total;
      

      totCost = getSum(data, 3);
      aveCost = totCost / n_rows;
      minCost = range.min;
      maxCost = range.max;

      statsData = [
          ['Stat', 'Cost'],
          ['Average', aveCost],
          ['Minimum', minCost],
          ['Maximum', maxCost],
          ['Total', totCost]
      ];

      drawTable(statsData);


      var options = 
        title: 'Costs for last 30 days',
        titleTextStyle: color: 'grey', fontSize: 16,
        hAxis: title: 'Date', titleTextStyle: bold: false, italic: false, color: 'grey', slantedTextAngle: 90, textStyle: fontSize: 12,
        legend: position: 'top',
        vAxes:  
                0: title: 'Cost (p)', titleTextStyle: bold: false, italic: false, color: 'grey',
        ,
        focusTarget: 'category',
        intervals: color:'#000000',
                    textStyle:  color: 'none',
        series: 
            0: color: '#44AA99', type: 'bars',
            1: color: '#DDCC77', type: 'bars',
            2: 
                color: 'transparent',
                type: 'line',
                lineWidth: 0,
                pointSize: 0,
                enableInteractivity: false,
                visibleInLegend: false
            
        ,
        interpolateNulls: true,
        bar:  groupWidth: '75%' ,
        isStacked: true,
      ;

      var formatter = new google.visualization.NumberFormat(
        prefix: '£', fractionDigits: 2
      );
      formatter.format(data,1);
      formatter.format(data,2);
      formatter.format(data,3);

      var chart = new google.visualization.ComboChart(document.getElementById('power_div'));

      chart.draw(data, options);

   ,'text');



function drawTable(statsData) 

    var stats = new google.visualization.arrayToDataTable(statsData);

    var options = 
        showRowNumber: false,
        width: '100%',
        height: '100%'
    ;

    var formatter = new google.visualization.NumberFormat(
        prefix: '£', fractionDigits: 2
      );
    formatter.format(stats,1);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(stats, options);

【讨论】：

解决了它 - 现在工作得很好！我快到了，但我没有从我的主图表函数 (drawPower) 中调用 drawTable。非常感谢！