動的なGoogleグラフの設定

Question

GoogleのプロジェクトではGoogleのチャートを使用する予定であり、フロントエンドにはAngular JSを使用しています。 （新規の両方の角&グーグルチャート）

はGoogleのチャートはチャートの各タイプを設定するための任意の既製UIを提供していますか？

ユーザーがグラフの種類を選択すると、ユーザーに構成が表示され、ユーザーが選択するとそのグラフに適用されます。

例：円グラフが選択されている

1. 場合は "pieHole" フィールドが表示されます。

2. 棒グラフが選択されている場合、「isStacked」フィールドが表示されます。事前に

感謝:)チャートエディタが開いたら

Answer 1

チェックアウトChartEditor Class

を次の作業スニペットは人口円グラフ

でチャートエディタ]ダイアログボックスを開き、参照タブをカスタマイズしてさまざまなチャートオプションをカスタマイズします

[保存]をクリックしてページ上<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>