1

プロジェクトでGoogleチャートを使用する予定で、フロントエンドにはAngular JSを使用しています。(Angular チャートと Google チャートの両方で新規)

Google チャートは、各タイプのチャートを構成するための既製の UIを提供していますか?

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

元：

  1. 円グラフが選択されている場合、「pieHole」フィールドが表示されます。

  2. 棒グラフを選択すると「isStacked」フィールドが表示されます。

前もって感謝します ：）

4

1 に答える 1

1

クラスをチェックしてくださいChartEditor

次の作業スニペットは、データが取り込まれた円グラフを含むグラフ エディター ダイアログを開きます。

グラフ エディタが開いたら、さまざまなグラフ オプションの [ カスタマイズ] タブを参照してください。

[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>

于 2016-12-01T19:51:39.377 に答える