javascript - 从chartwrapper View获取数据并转换为json

Question

我正在使用 Chartwrapper 来渲染图表。我想在应用 View 过滤器后从图表包装器中提取数据。如何从 Chart Wrapper 获取过滤后的数据并转换为 Json ？

var viewRows = trendsData.getFilteredRows([{column: trendsData.getColumnIndex('p_type'), value: prd}]);

var wrapper = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      dataTable: trendsData,
      containerId: 'trends_div',
      options: {
                  curveType: 'function',
                  height: 350,
                  legend: {position: 'right', alignment: 'center'},
                  lineWidth: 3,
                  title: trendMetricLabel + ' By ' + period,
                  theme: 'material',
                    hAxis: {
                        titleTextStyle:{fontSize: 12},
                        columnType: 'String',
                        showTextEvery: showTextInterval,
                        maxAlternation:1,
                        slantedText:'true', 
                        slantedTextAngle:'40',
                        viewWindowMode: 'pretty',
                        textStyle: {fontSize: 12}
                    },
                    vAxis: {
                        format: 'short',
                        minValue: 0,
                        viewWindow: {
                                min: 0
                            }
                    },
                    series: {
                            0: { color: '#e7711b' }
                  }
            }
    });

    wrapper.setView({
            columns: [3,4,5,6],
            rows: viewRows
        });

Answer 1

1) 从包装器的数据表创建数据 View

var dataView = new google.visualization.DataView(wrapper.getDataTable());

2) 从包装 View 设置列和行

dataView.setColumns(wrapper.getView().columns);
dataView.setRows(wrapper.getView().rows);

3)将数据 View 转换为数据表，然后转换为json

dataView.toDataTable().toJSON()

<小时/>

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var trendsData = new google.visualization.DataTable();
  trendsData.addColumn("string", "Date");
  trendsData.addColumn("number", "Retailer 1");
  trendsData.addColumn("number", "Retailer 3");
  trendsData.addColumn("number", "Retailer 2");

  trendsData.addRows([
    ["01/12", 160, {v: 208, f: '208'},{v: 320, f: '320'}],
    ["02/12", 570, {v: 741, f: '741'},{v: 1140, f: '1140'}],
    ["03/12", 385, {v: 497, f: '497'},{v: 770, f: '770'}],
    ["04/12", 328, {v: 425, f: '425'},{v: 656, f: '656'}],
    ["05/12", 445, {v: 577, f: '577'},{v: 890, f: '890'}],
    ["06/12", 406, {v: 525, f: '525'},{v: 812, f: '812'}],
    ["07/12", 249, {v: 475, f: '475'},{v: 772, f: '772'}]
  ]);

  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'trends_div',
    dataTable: trendsData,
    options: {
      curveType: 'function',
      height: 350,
      legend: {
        position: 'right',
        alignment: 'center'
      },
      lineWidth: 3,
      //title: trendMetricLabel + ' By ' + period,
      theme: 'material',
      hAxis: {
        titleTextStyle: {
          fontSize: 12
        },
        columnType: 'String',
        //showTextEvery: showTextInterval,
        maxAlternation: 1,
        slantedText: true,
        slantedTextAngle: 40,
        viewWindowMode: 'pretty',
        textStyle: {
          fontSize: 12
        }
      },
      vAxis: {
        format: 'short',
        minValue: 0,
        viewWindow: {
          min: 0
        }
      },
      series: {
        0: {
          color: '#e7711b'
        }
      }
    },
    view: {
      columns: [0, 1],
      rows: [0, 2, 4, 6]
    }
  });

  google.visualization.events.addListener(wrapper, 'ready', function () {

    // create view from wrapper data table
    var dataView = new google.visualization.DataView(wrapper.getDataTable());

    // set columns / rows
    dataView.setColumns(wrapper.getView().columns);
    dataView.setRows(wrapper.getView().rows);

    // convert view to data table, then json
    document.getElementById('json_div').innerHTML = dataView.toDataTable().toJSON();
  });

  wrapper.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="trends_div"></div>
<div id="json_div"></div>