如何将 google 图表的所有选项(图表类型、颜色、图例、标题...等)放入 js 变量中,以便我可以使用相同的选项构建另一个图表?原始图表已构建在 div 的包装器中。
最佳答案
如果您有 ChartWrapper 对象,您可以使用 getOptions() 方法,如官方文档 ChartWrapper Class 中所述。 .
如果您始终可以使用 ChartWrapper,因为它为您提供了很多可用于操作图表数据和选项的帮助程序。 Here是官方文档
希望这有帮助
更新
文档中的小样本实际上我发现您可能需要其他东西,并且 toJSON() 方法更好
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
['', 700, 300, 400, 500, 600, 800]],
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw();
console.log(wrapper.toJSON());
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
如您所见,我添加了一个调用该方法的 console.log。
你可以在这个fiddle附近玩如果您需要做更多实验
更新2 我对这个问题的理解有点慢:)
因此,如果您需要第二个图表并具有第一个图表的选项,最好的想法是克隆(包装器有一个clone()方法)第一个包装器,然后更改您需要更改的属性
从前面的代码中,我们采用 drawVisualization() 方法并更新它以进行克隆:
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
['', 700, 300, 400, 500, 600, 800]],
options: {'title': 'Countries'},
containerId: 'chart_div'
});
wrapper.draw();
console.log(wrapper.toJSON());
//hre you clone the wrapper
wrapperCLone = wrapper.clone();
console.log(wrapperCLone);
//now you can change the data and some option and draw a new one
wrapperCLone.setContainerId("second_chart_div");
wrapperCLone.setDataTable([['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
['', 1700, 1300, 1400, 1500, 1600, 1800]]);
wrapperCLone.draw();
}
如您所见,我们将包装器克隆到一个新对象wrapperCLone中,然后设置新的容器ID和数据表。
您可以更改包装器的所有单个属性,您可以在我链接的有关 ChartWrapper 类的第一个指南中找到这些方法。
我还更新了 fiddle因此您可以看到第一个图表,在下面您可以找到具有不同数据表但相同选项的克隆图表。
希望这就是您正在寻找的。祝你好运! :)
关于javascript - 如何将谷歌图表中的所有图表选项获取到js变量中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37853687/