我正在使用Chartwrapper渲染图表。应用视图过滤器后，我想从chartwrapper中提取数据。如何从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
});
1）从包装器的数据表创建数据视图
var dataView = new google.visualization.DataView(wrapper.getDataTable());
2）从包装器视图设置列和行
dataView.setColumns(wrapper.getView().columns);
dataView.setRows(wrapper.getView().rows);
3）将数据视图转换为数据表，然后转换为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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句