從谷歌圖表中的柱狀圖創建匯總表

Question

我正在 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);

}

但這些值保持在它們的初始化值（零）。 有沒有辦法將計算值從圖表函數傳遞給表格函數？

Answer 1

不確定從現在開始在哪里drawTable ，
但是是的，您可以將值從圖表函數傳遞給表格函數。

在圖表函數中創建statsData ，
然后將其傳遞給 table 函數。
並刪除當前正在調用 table 函數的位置。

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

    ...

看下面的片段...
function 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);

}