折れ線グラフ

Stay organized with collections Save and categorize content based on your preferences.

概要

SVG または VML を使ってブラウザ内にレンダリングされる折れ線グラフポイントにカーソルを合わせるとツールチップが表示されます。

曲線の展開

線を平滑化するには、curveType オプションを function に設定します。

このチャートを生成するコードは以下のとおりです。curveType: function オプションが使用されていることに注意してください。

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

マテリアル 折れ線グラフの作成

2014 年、Google は、Google プラットフォームで実行されるプロパティやアプリ(Android アプリなど)での一般的なデザインをサポートするため、ガイドラインを発表しました。このような取り組みをマテリアル デザインと呼びます。Google はすべてのコアチャートの「マテリアル」版を提供します。見た目がよければ、自由にご利用ください。

マテリアル 折れ線グラフの作成は、現在「クラシック」折れ線グラフと呼ばれるものを作成するのと似ています。 Google の可視化 API を('corechart' パッケージではなく 'line' パッケージを使用して)読み込み、データテーブルを定義してオブジェクトを作成します(ただし、google.visualization.LineChart ではなく google.charts.Line クラスを使用します)。

注: Material Chart は、旧バージョンの Internet Explorer では機能しません。(IE8 とそれ以前のバージョンでは、マテリアル チャートに必要な SVG がサポートされていません)。

マテリアル 折れ線グラフは、改善されたカラーパレット、角の丸み、ラベルの書式設定、系列間のデフォルトのスペースの縮小、よりソフトなグリッドライン、タイトル(および字幕の追加)など、従来の折れ線グラフよりも多くの小さな改善が行われています。

      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

マテリアル チャートはベータ版です。外観とインタラクティビティはほぼ最終的なものですが、クラシック チャートで使用できるオプションの多くはまだ使用できません。この問題でサポートされていないオプションのリストについては、こちらをご覧ください。

また、オプションの宣言方法は最終版ではないため、従来のオプションを使用している場合は、次の行を置き換えて、マテリアル オプションに変換する必要があります。

chart.draw(data, options);

...以下に置き換えます。

chart.draw(data, google.charts.Line.convertOptions(options));

デュアル Y グラフ

折れ線グラフに 2 つの系列(通常は 2 つの独立した Y 軸)を表示し、1 つの系列を左軸、もう 1 つの系列を右軸に表示することもできます。