Question

如何将所有谷歌图表的选项（图表类型，颜色，图例，标题......等）放入js变量中，以便我可以使用相同的选项来构建另一个图表？原始图表已经构建在div中的包装器中。

Answer 1

如果您有ChartWrapper对象，则可以使用官方文档ChartWrapper Class中所述的getOptions（）方法。

如果您始终可以使用ChartWrapper，那么您可以使用很多帮助程序来操作图表数据和选项。 Here是官方文件

希望这会有所帮助

<强>更新

来自doc的小样本实际上我发现你可能需要别的东西而且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中播放arround

更新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和dataTable。

您可以更改包装器的所有单个属性，您可以在我链接的有关chartWrapper类的第一个指南中找到方法。

我还更新了fiddle，因此您可以看到第1个图表及以下图表，您可以找到具有不同数据表但具有相同选项的克隆图表。

希望这是你正在寻找的东西。祝好运！：）

如何从谷歌图表中获取所有图表选项到js变量？

1 个答案: