Question

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

以下是我的图表的外观，但我需要所有值的平均线。

提前感谢您的关注。

    <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：＆＃39; ChartRangeFilter＆＃39;。任何人都有任何想法??

        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>

Answer 1

您应该可以使用trendline。

趋势线是叠加在图表上的一条线，显示数据的整体方向。 Google Charts可以自动生成散点图，条形图，柱形图和折线图的趋势线。

根据给定代码进行猜测，您可能需要将trendlines: { 0: {} }添加到chartOptions变量的control。

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

Answer 2

我很欣赏这有点老了，但我的搜索发现了这一点，并希望进一步提供帮助。

添加趋势线会给出数据趋势（增加，减少）而不是平均值。我无法将此答案视为我的答案，请参阅https://groups.google.com/forum/#!topic/google-chart-api/UOdUFszYSRc

正如Tom建议我实际使用组合图并计算第二个系列，但由于你的图表非常复杂，你可能希望使用API方法，他的JSFiddle（在上面的链接中找到）显示工作 - 感谢Tom。

为Google Charts创建平均线

2 个答案: