动态 google 图表配置

Question

我们计划在我们的项目中使用 google 图表，我们在前端使用 Angular JS。（Angular 和 Google 图表都是新的）

Google图表是否提供任何现成的UI来配置每种类型的图表？

如果用户 select 图表类型，它应该向用户显示配置，一旦用户 selects ，它就会应用于该图表。

例如：

如果 selected 饼图 "pieHole" 字段将显示。
如果条形图被 selected "isStacked" 字段将被显示。

提前致谢:)

Answer 1

查看 ChartEditor Class

以下工作代码段会打开一个图表编辑器对话框，其中包含填充的饼图

打开图表编辑器后，请查看 自定义 选项卡以获取各种图表选项

点击"OK"将图表保存到页面

上的<div>

google.charts.load('current', {
  callback: function () {
    var chartEditor = null;

    // Create the chart to edit
    var chartWrapper = new google.visualization.ChartWrapper({
      chartType: 'PieChart',
      dataTable: new google.visualization.DataTable({
        "cols": [
          {"label": "Country", "type": "string"},
          {"label": "# of Devices", "type": "number"}
        ],
        "rows": [
          {"c": [{"v": "Canada"}, {"v": 33}]},
          {"c": [{"v": "Mexico"}, {"v": 33}]},
          {"c": [{"v": "USA"}, {"v": 34}]}
        ]
      })
    });
    chartEditor = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
    chartEditor.openDialog(chartWrapper, {});

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));
    }
  },
  packages:['charteditor', 'controls']
});

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

动态 google 图表配置

Dynamic google charts configuration

javascript

charts

google-visualization

pygooglechart

angularjs