Question

是否可以重叠 areaCharts？

我从 json 源获取数据...但时间戳不同。

所以我需要先绘制数据1，然后绘制数据2。两者都应该像一张图表一样显示。

我尝试先从 data1 添加行，data2 的列为空，然后添加 data2，data1 的值为空。

但我需要显示值的总和，但出现错误。

示例：

1616626800000，56，空

1616626809018，33，空

1616626800010，空，22

1616653459676，空，97

所以我先添加 data1，然后添加 data2。

它显示正确，但我需要显示数据的总和，这不起作用：

    var container = document.getElementById('current');
      var chartArea = new google.visualization.AreaChart(container);

      // detect zoom
      var visibleRange = {};
      var zoomObserver = new MutationObserver(checkZoom);
      zoomObserver.observe(container, {
        childList: true,
        subtree: true
      });

      chartArea.draw(data_line, optionsLine);

      function checkZoom() {
        var newRange = getChartRange();
        if (JSON.stringify(visibleRange) !== JSON.stringify(newRange)) {
          visibleRange = newRange;
          showRangeValues();
        }
      }

      function getChartRange() {
        var chartLayout = chartArea.getChartLayoutInterface();
        var chartBounds = chartLayout.getChartAreaBoundingBox();
        return {
          x: {
            min: chartLayout.getHAxisValue(chartBounds.left),
            max: chartLayout.getHAxisValue(chartBounds.left + chartBounds.width)
          },
          y: {
            min: chartLayout.getVAxisValue(chartBounds.top + chartBounds.height),
            max: chartLayout.getVAxisValue(chartBounds.top)
          }
        };
      }

      function showRangeValues() {
        var rangeFilter;
        var rangeKey;
        var rangeRows;
        var rangeTable;
        var rangeView;

        rangeFilter = [];
        $.each(new Array(data_line.getNumberOfColumns()), function(colIndex) {
          rangeKey = (colIndex === 0) ? 'x' : 'y';
          rangeFilter.push({
            column: colIndex,
            minValue: visibleRange[rangeKey].min,
            maxValue: visibleRange[rangeKey].max
          });
        });

        rangeRows = data_line.getFilteredRows(rangeFilter);
        rangeView = new google.visualization.DataView(data_line);
        rangeView.setRows(rangeRows);
        // console.log(rangeView);
        // group data
        var group = google.visualization.data.group(
          rangeView, // data table
          [{
            column: 0,
            type: 'string',
            modifier: function() {
              return 'Total';
            }
          }],
          [{
              aggregation: google.visualization.data.sum,
              column: 1,
              label: 'lieferung',
              type: 'number'
            },
            {
              aggregation: google.visualization.data.sum,
              column: 2,
              label: 'pv',
              type: 'number'
            }
          ]
        );


        // console.log(group);

        var deliveryTotal = group.getValue(0, 1) / 1000;
        var pvUsedTotal = group.getValue(0, 2) / 1000;
        // var usedTotal = group.getValue(0, 3) / 1000;

        document.getElementById('deliveryTotal').innerHTML = deliveryTotal.toFixed(2) + "kWh";
        document.getElementById('pvUsedTotal').innerHTML = pvUsedTotal.toFixed(2) + "kWh";
        // document.getElementById('usedTotal').innerHTML = usedTotal.toFixed(2) + "kWh";

      }

好像在这里： rangeRows = data_line.getFilteredRows(rangeFilter); 我现在得到了行。

重叠谷歌区域图

0 个答案: