javascript - 如何将谷歌图表中的所有图表选项获取到js变量中?

标签 javascript google-visualization

如何将 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/

相关文章:

javascript - 如何在 JavaScript 中根据对象值对数组进行排序?

javascript - 如何使用 vue-google-charts 创建组织结构图

javascript - 无法在 Google Visualization API 图表中加载工作表

javascript - 按项目修改 X-Editable 中的按钮模板?

javascript - 如何注册 video.js 插件

javascript - Promise 与 _.each 异步调用

javascript - 在 Google Charts 中格式化图例和轴

javascript - 将谷歌图表保存到图像中并在新选项卡中打开它们

google-visualization - 如何在 Google 图表工具中绘制甘特图?

javascript - 带有 ES6 的 Webpack : module import policy