google-apps-script – 为Google Charts创建平均线

2023年6月15日 243次阅读

我正在学习使用谷歌图表,我试图获得所有值的平均值,并在图表上显示一条线来表示平均值.

下面是我的图表的外观,但我需要所有值的平均线.

提前感谢您的关注.

    <html>
<body style="font-family: Arial;border: 0 none;">
<script src="https://www.gstatic.com/charts/loader.js"></script>
        <div id="dashboard" style="width:1300px;overflow:scroll;">
            <div id="chart" style="position: relative; width: 1300px; height: 300px;"></div>
            <div id="control" style="position: relative; width: 1300px; height: 30px;"></div>
        </div>



    <script type="text/javascript">



    google.charts.load('current', {
      callback: function () {
        var query = new google.visualization.Query('xxxxxxx');
        query.setQuery('select A,B,C,D');
        query.send(function (response) {
          if (response.isError()) {
            console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
          }

          var control = new google.visualization.ControlWrapper({
            controlType: 'ChartRangeFilter',
            containerId: 'control',
            options: {
              filterColumnIndex: 0,
              ui: {
                chartType: 'ScatterChart',
                chartOptions: {
                 pointSize: 2,
                  chartArea: {width: '90%'},
                  hAxis: {format: 'dd/MM/yyyy'}
                },
                chartView: {
                  columns: [ 0, 1, 2]
                }
              }
            }
          });

          var chart = new google.visualization.ChartWrapper({
            chartType: 'SteppedAreaChart',
            containerId: 'chart',
            options: {
              filterColumnIndex: 0,
              pointSize: 2,
              chartArea: {height: '80%', 'width': '90%'},
              hAxis: {format: 'E dd/MMM','textStyle':{'fontSize': 11, 'color': 'black','bold':true},'minTextSpacing': 0, 'slantedText': false},
              vAxis: {format: '0'},          
              legend: {position: 'top'},
              bar: {groupWidth: '100%'},
              isStacked: false
            },
            view: {
              columns: [ 0, 1,2]

            }
          });



        var proxyTable = new google.visualization.ChartWrapper({
            chartType: 'Table',
            containerId: 'TableProxy',
            options: {
                page: 'enable',
                pageSize: 1
            },
            view: {
                columns: [0]
            }
        });



        google.visualization.events.addListener(proxyTable, 'ready', function () {
            var dt = proxyTable.getDataTable();
            var groupedData = google.visualization.data.group(dt, [0], [{
                column: 2,
                type: 'number',
                aggregation: google.visualization.data.avg
            }]);
            chart.setDataTable(groupedData);
            chart.draw();
        });


        google.visualization.events.addListener(proxyTable, 'ready', function () {
            var group = google.visualization.data.group(proxyTable.getDataTable(), [{
                column: 0,
                type: 'date',
                modifier: function () {
                    return 1;
                }
            }], [{
                column: 2,
                type: 'number',
                aggregation: google.visualization.data.avg
            }]);

          });



          dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
          dashboard.bind(control, chart);
          dashboard.draw(response.getDataTable());
        });
      },
      packages: ['controls', 'corechart', 'table'], 'language': 'pt-br'
    });



    </script>

    </body>

    </html>

可以按日期分组(代码如下)……但主要的难点是如何使用controlType：’ChartRangeFilter’.任何人有任何想法？

        function floorDate(datetime) {
      var newDate = new Date(datetime);
      newDate.setHours(0);
      newDate.setMinutes(0);
      newDate.setSeconds(0);
      return newDate;
    }

    var columnChart1 = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart3'
    });
    //      columnChart1.draw();

    // Create the dashboard.
    new google.visualization.Dashboard(document.getElementById('dashboard')).
      // Configure & bind the controls 

    bind(divPicker, [table, columnChart]).
      // Draw the dashboard
    draw(data);

    google.visualization.events.addListener(divPicker, 'ready',

      function(event) {
        // group the data of the filtered table and set the result in the pie chart.
        columnChart1.setDataTable(google.visualization.data.group(
          // get the filtered results
          table.getDataTable(), [{
            'column': 0,
            'modifier': floorDate,
            'type': 'date'
          }], [{
            'column': 2,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }]
        ));
        // redraw the pie chart to reflect changes
        columnChart1.draw();
      });

    google.visualization.events.addListener(divPicker, 'statechange',

      function(event) {
        // group the data of the filtered table and set the result in the pie chart.
        columnChart1.setDataTable(google.visualization.data.group(table.getDataTable(), [0], [{
          'column': 2,
          'aggregation': google.visualization.data.avg,
          'type': 'number'
        }]));
        // redraw the pie chart to reflect changes
        columnChart1.draw();
      });

  }

  google.setOnLoadCallback(drawVisualization);

</script>

最佳答案 你应该可以使用
trendline.

A trendline is a line superimposed on a chart revealing the overall direction of the data. Google Charts can automatically generate trendlines for Scatter Charts, Bar Charts, Column Charts, and Line Charts.

从给定代码中猜测,您可能希望将趋势线{0：{}}添加到控件变量的chartOptions中.

将代码放入jsFiddle或Codepen可以更容易地调试并向您展示针对特定问题的有效解决方案.

点赞