javascript:google_charts

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		 前のリビジョン
javascript:google_charts [2020/04/26 10:02] – 作成 ともやんjavascript:google_charts [2020/04/26 17:51] (現在) – [サンプル] ともやん
行 1: 行 1:
 +<html>
 +  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 +</html>
 ====== Google Charts ====== ====== Google Charts ======
 本家: [[https://developers.google.com/chart?hl=ja|Charts  |  Google Developers]]\\ 本家: [[https://developers.google.com/chart?hl=ja|Charts  |  Google Developers]]\\
 +
 +===== サンプル =====
 +<html>
 +  <div id="columnchart_material" style="width: 640px; height: 400px;"></div>
 +  <script>
 +    google.charts.load('current', {'packages':['bar']});
 +    google.charts.setOnLoadCallback(drawChart);
 +    
 +    function drawChart() {
 +      var data = google.visualization.arrayToDataTable([
 +        ['Year', 'Sales', 'Expenses', 'Profit'],
 +        ['2014', 1000, 400, 200],
 +        ['2015', 1170, 460, 250],
 +        ['2016', 660, 1120, 300],
 +        ['2017', 1030, 540, 350]
 +      ]);
 +      
 +      var options = {
 +        chart: {
 +          title: 'Company Performance',
 +          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
 +        }
 +      };
 +      
 +      var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
 +      
 +      chart.draw(data, google.charts.Bar.convertOptions(options));
 +    }
 +  </script>
 +</html>
 +
 +===== 参考文献 =====
 +[[https://developers.google.com/chart/interactive/docs/gallery/columnchart?hl=ja|Visualization: Column Chart  |  Charts  |  Google Developers]]\\
  
  • javascript/google_charts.1587862942.txt.gz
  • 最終更新: 2020/04/26 10:02
  • by ともやん