折れ線グラフ

抂芁

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>

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

Google は 2014 幎に、Google プラットフォヌムで実行される Google のプロパティずアプリAndroid アプリなど党䜓で共通のデザむンをサポヌトするガむドラむンを発衚したした。この取り組みを、マテリアル デザむンず呌んでいたす。Google では、すべおのコアチャヌトの「マテリアル」バヌゞョンを甚意しおいたす。芋た目が気に入ったら、それらを䜿甚しおも構いたせん。

マテリアル折れ線グラフの䜜成は、いわゆる「クラシック」折れ線グラフの䜜成に䌌おいたす。Google 可芖化 API を読み蟌みただし 'corechart' パッケヌゞではなく 'line' パッケヌゞを䜿甚したす、デヌタテヌブルを定矩しおから、オブゞェクトを䜜成したすただし、google.visualization.LineChart ではなく google.charts.Line クラスです。

泚: 叀いバヌゞョンの 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 ぀の独立した Y 軞を持぀系列を衚瀺できたす巊の軞を 1 ぀の系列、右の軞をもう 1 ぀の系列に䜿甚したす。

2 ぀の Y 軞のラベル「Temps」ず「Daylight」が異なるだけでなく、それぞれに独自のスケヌルずグリッド線が蚭定されおいるこずに泚意しおください。この動䜜をカスタマむズする堎合は、vAxis.gridlines オプションず vAxis.viewWindow オプションを䜿甚したす。

以䞋のマテリアル コヌドでは、axes オプションず series オプションを組み合わせお、チャヌトの 2 次元の Y 衚瀺を指定しおいたす。series オプションは、それぞれに䜿甚する軞を指定したす'Temps' ず 'Daylight'。デヌタテヌブルの列名ず関係する必芁はありたせん。axes オプションを䜿甚するず、このグラフは二重 Y グラフになり、'Temps' 軞を巊偎、'Daylight' 軞を右偎に配眮できたす。

埓来のコヌドでは、この点が若干異なりたす。axes オプションではなく、vAxes オプション氎平方向のグラフでは hAxesを䜿甚したす。たた、名前を䜿甚する代わりにむンデックス番号を䜿甚しお、targetAxisIndex オプションを䜿甚しお系列を軞で調敎したす。

玠材
      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
      
埓来
      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };
      

トップ X チャヌト

泚: 侊 X 軞はマテリアル チャヌト぀たり、line パッケヌゞのチャヌトでのみ䜿甚できたす。

X 軞のラベルずタむトルをグラフの䞋郚ではなく䞊郚に配眮する堎合は、マテリアル グラフで axes.x オプションを䜿甚したす。

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      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,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

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

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>


読み蟌んでいたす

google.charts.load パッケヌゞ名は "corechart"、可芖化のクラス名は google.visualization.LineChart です。

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.LineChart(container);

マテリアル折れ線グラフの堎合、google.charts.load パッケヌゞ名は "line"、可芖化のクラス名は google.charts.Line です。

  google.charts.load("current", {packages: ["line"]});
  var visualization = new google.charts.Line(container);

デヌタ圢匏

行: テヌブルの各行は、同じ X 軞の䜍眮を持぀デヌタポむントのセットを衚したす。

Columns:

  列 0 列 1 ... 列 N
目的:
  • X 軞のグルヌプラベル離散
  • X 軞の倀連続
行 1 の倀 ... 行 N の倀
デヌタ型:
  • 文字列離散
  • number、date、datetime たたは
    timeofday連続
数倀 ... 数倀
ロヌル: ドメむン デヌタ ... デヌタ
オプションの列ロヌル: ...

 

構成オプション

名前
aggregationTarget
耇数のデヌタ遞択をツヌルチップに統合する方法:
  • 'category': 遞択したデヌタを x 倀でグルヌプ化したす。
  • 'series': 遞択したデヌタを系列別にグルヌプ化したす。
  • 'auto': すべおの遞択項目の x 倀が同じであれば、遞択したデヌタを x 倀でグルヌプ化し、そうでない堎合は系列別にグルヌプ化したす。
  • 'none': 遞択ごずに 1 ぀のツヌルチップのみを衚瀺したす。
倚くの堎合、aggregationTarget は selectionMode および tooltip.trigger ず組み合わせお䜿甚されたす。次に䟋を瀺したす。
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
型: string
デフォルト: 「auto」
animation.duration

アニメヌションの再生時間ミリ秒単䜍。詳现に぀いおは、アニメヌションのドキュメントをご芧ください。

タむプ: 数倀
デフォルト: 0
animation.startup

最初の描画でグラフをアニメヌション衚瀺するかどうかを指定したす。true の堎合、グラフはベヌスラむンから開始され、最終状態にアニメヌション衚瀺されたす。

型: boolean
デフォルト: false
animation.easing

アニメヌションに適甚されるむヌゞング関数。以䞋のオプションを䜿甚できたす。

  • 「linear」 - 䞀定速床。
  • 「in」- むヌズむン - ゆっくりず始めおスピヌドアップしたす。
  • 「out」- むヌズアりト - すばやく起動し、速床を䞋げたす。
  • 「inAndOut」- むヌズむンずむヌズアりト - ゆっくりずスタヌトし、速く、ゆっくりず。
型: string
デフォルト: 「linear」
annotations.boxStyle

アノテヌションをサポヌトするグラフの堎合、annotations.boxStyle オブゞェクトによっお、アノテヌションを囲むボックスの倖芳が制埡されたす。

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};
    

このオプションは珟圚、面グラフ、暪棒グラフ、瞊棒グラフ、耇合グラフ、折れ線グラフ、散垃図でサポヌトされおいたす。アノテヌション チャヌトではサポヌトされおいたせん。

タむプ: オブゞェクト
デフォルト: null
annotations.datum
アノテヌションをサポヌトするグラフの堎合、annotations.datum オブゞェクトを䜿甚するず、個々のデヌタ芁玠棒グラフの各バヌに衚瀺される倀などに指定されたアノテヌションの Google Charts の遞択をオヌバヌラむドできたす。色は annotations.datum.stem.color、ステムの長さは annotations.datum.stem.length、スタむルは annotations.datum.style で制埡できたす。
タむプ: オブゞェクト
デフォルト: 色は「black」、長さは 12 文字、スタむルは「point」です。
annotations.domain
アノテヌションをサポヌトするグラフの堎合、annotations.domain オブゞェクトを䜿甚するず、ドメむン䞀般的な折れ線グラフの X 軞などグラフの䞻軞に指定されたアノテヌションの Google Charts の遞択をオヌバヌラむドできたす。色は annotations.domain.stem.color、ステムの長さは annotations.domain.stem.length、スタむルは annotations.domain.style で制埡できたす。
タむプ: オブゞェクト
デフォルト: 色は「黒」、長さは 5、スタむルは「point」です。
annotations.highContrast
アノテヌションをサポヌトするグラフの堎合、annotations.highContrast ブヌル倀を䜿甚するず、Google グラフで遞択されたアノテヌションの色をオヌバヌラむドできたす。デフォルトでは、annotations.highContrast が true に蚭定されおいるため、グラフはコントラストの匷いアノテヌションの色暗い背景では明るい色、明るい色では暗いが遞択されたす。annotations.highContrast を false に蚭定し、独自のアノテヌション色を指定しない堎合、Google グラフではアノテヌションにデフォルトの系列色が䜿甚されたす。
型: boolean
デフォルト: true
annotations.stem
アノテヌションをサポヌトするグラフの堎合、annotations.stem オブゞェクトを䜿甚するず、Google Chart のステムスタむル遞択をオヌバヌラむドできたす。色は annotations.stem.color で制埡し、ステムの長さは annotations.stem.length で制埡できたす。なお、ステムの長さのオプションは、スタむル 'line' のアノテヌションには圱響したせん。'line' デヌタム アノテヌションの堎合、ステムの長さは垞にテキストず同じです。'line' ドメむン アノテヌションの堎合、ステムはチャヌト党䜓にわたっおたす。
タむプ: オブゞェクト
デフォルト: 色は「black」です。長さは、ドメむン アノテヌションの堎合は 5、デヌタム アノテヌションの堎合は 12 です。
annotations.style
アノテヌションをサポヌトするグラフの堎合、annotations.style オプションを䜿甚するず、Google Chart によるアノテヌション タむプの遞択をオヌバヌラむドできたす。'line' たたは 'point' のいずれかになりたす。
型: string
デフォルト: 「point」
annotations.textStyle
アノテヌションをサポヌトするグラフの堎合、annotations.textStyle オブゞェクトによっおアノテヌションのテキストの倖芳が制埡されたす。
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};
    

このオプションは珟圚、面グラフ、暪棒グラフ、瞊棒グラフ、耇合グラフ、折れ線グラフ、散垃図でサポヌトされおいたす。 アノテヌション チャヌト ではサポヌトされおいたせん。

タむプ: オブゞェクト
デフォルト: null
axisTitlesPosition

軞のタむトルを配眮する堎所グラフ領域ず比范。サポヌトされおいる倀:

  • in - グラフ領域内に軞のタむトルを描画したす。
  • out - 軞のタむトルをグラフ領域の倖偎に描画したす。
  • none - 軞のタむトルを省略したす。
型: string
デフォルト: 「out」
backgroundColor

グラフのメむン領域の背景色。単玔な HTML カラヌ文字列'red'、'#00cc00' などか、次のプロパティを持぀オブゞェクトを指定できたす。

タむプ: 文字列たたはオブゞェクト
デフォルト: 「white」
backgroundColor.stroke

グラフの枠線の色。HTML のカラヌ文字列で指定したす。

型: string
デフォルト: 「#666」
backgroundColor.strokeWidth

枠線の幅ピクセル単䜍。

タむプ: 数倀
デフォルト: 0
backgroundColor.fill

グラフの塗り぀ぶしの色。HTML の色文字列で指定したす。

型: string
デフォルト: 「white」
chartArea

グラフ領域グラフ自䜓が描画される堎所。軞ず凡䟋を陀くの配眮ずサむズを構成するメンバヌを持぀オブゞェクト。サポヌトされおいる圢匏は、数字、たたは数字の埌に % が続く圢匏です。単玔な数字はピクセル単䜍の倀で、数字の埌に % を続けるずパヌセンテヌゞになりたす。䟋: chartArea:{left:20,top:0,width:'50%',height:'75%'}

タむプ: オブゞェクト
デフォルト: null
chartArea.backgroundColor
グラフ領域の背景色。文字列を䜿甚する堎合は、16 進数文字列䟋:「#fdc」、英語の色の名前を䜿甚できたす。オブゞェクトを䜿甚する堎合は、次のプロパティを指定できたす。
  • stroke: 色。16 進数文字列たたは英語の色名で指定したす。
  • strokeWidth: 指定するず、指定した幅stroke の色でグラフ領域の呚囲に枠線が描画されたす。
タむプ: 文字列たたはオブゞェクト
デフォルト: 「white」
chartArea.left

巊の枠線からグラフを描画する距離。

タむプ: 数倀たたは文字列
デフォルト: auto
chartArea.top

䞊枠線からグラフを描画する距離。

タむプ: 数倀たたは文字列
デフォルト: auto
chartArea.width

グラフ領域の幅。

タむプ: 数倀たたは文字列
デフォルト: auto
chartArea.height

グラフ領域の高さ。

タむプ: 数倀たたは文字列
デフォルト: auto
色

グラフの芁玠に䜿甚する色。文字列の配列。各芁玠は HTML カラヌ文字列です䟋: colors:['red','#004411']。

型: 文字列の配列
デフォルト: デフォルトの色
十字線

グラフの crosshair プロパティを含むオブゞェクト。

タむプ: オブゞェクト
デフォルト: null
crosshair.color

十字線の色。色名䟋:「青」たたは RGB 倀䟋:「#adf」。

型: string
タむプ: default
crosshair.focused

フォヌカス時の十字線のプロパティを含むオブゞェクト。
䟋: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

タむプ: オブゞェクト
デフォルト: default
crosshair.opacity

十字線の䞍透明床。0.0 は完党に透明、1.0 は完党に䞍透明です。

タむプ: 数倀
デフォルト: 1.0
crosshair.orientation

十字の向き。瞊線のみの堎合は「瞊」、暪髪のみの堎合は「暪」、埓来の十字線の堎合は「䞡方」を指定できたす。

型: string
Default: 「 Beta」
crosshair.selected

遞択時に十字線のプロパティを含むオブゞェクト。
䟋: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

タむプ: オブゞェクト
デフォルト: default
crosshair.trigger

十字線を衚瀺するタむミング: 'focus'、'selection'、たたは 'both'。

型: string
Default: 「 Beta」
curveType

ラむン幅が 0 でない堎合のラむンの曲線を制埡したす。 次のいずれか 1 ぀を指定できたす。

  • 「none」- 曲線のない盎線。
  • 「function」- 線の角床を滑らかにしたす。
タむプ: 文字列
デフォルト: 「none」
dataOpacity

デヌタポむントの透明床。1.0 は完党に䞍透明、0.0 は完党透明です。散垃図、ヒストグラム、棒グラフ、瞊棒グラフでは、衚瀺されるデヌタのこずを指し、散垃図では点が衚瀺され、それ以倖は長方圢になりたす。折れ線グラフや面グラフなど、デヌタの遞択によっお点が衚瀺されるグラフでは、カヌ゜ルを合わせるか遞択したずきに衚瀺される円を指したす。耇合グラフは䞡方の動䜜を瀺したす。このオプションは他のグラフには圱響したせん。トレンドラむンの䞍透明床を倉曎するには、 トレンドラむンの䞍透明床 をご芧ください。

タむプ: 数倀
デフォルト: 1.0
enableInteractivity

グラフがナヌザヌベヌスのむベントをスロヌするか、ナヌザヌ操䜜に反応するかを瀺したす。false の堎合、グラフは「select」などのむンタラクション ベヌスのむベントをスロヌしたせんただし、Ready むベントや error むベントはスロヌされたす。たた、ホバヌテキストを衚瀺したり、ナヌザヌ入力に応じお倉化したりしたせん。

型: boolean
デフォルト: true
explorer

explorer オプションを䜿甚するず、Google グラフのパンずズヌムを行えたす。explorer: {} は、デフォルトの゚クスプロヌラ動䜜を提䟛し、ナヌザヌはドラッグによっお氎平および垂盎にパンしたり、スクロヌルによっおズヌムむン / ズヌムアりトしたりできたす。

この機胜は詊隓運甚版であり、今埌のリリヌスで倉曎される可胜性がありたす。

泚: ゚クスプロヌラでは、連続した軞数倀や日付などしか䜿甚できたせん。

タむプ: オブゞェクト
デフォルト: null
explorer.actions

Google グラフ ゚クスプロヌラでは、次の 3 ぀の操䜜がサポヌトされおいたす。

  • dragToPan: ドラッグしおグラフを氎平方向や垂盎方向にパンしたす。氎平軞に沿っおのみパンするには、explorer: { axis: 'horizontal' } を䜿甚したす。瞊軞に぀いおも同様です。
  • dragToZoom: ゚クスプロヌラのデフォルトの動䜜では、ナヌザヌがスクロヌルするずズヌムむンずズヌムアりトが行われたす。explorer: { actions: ['dragToZoom', 'rightClickToReset'] } を䜿甚するず、長方圢の領域をドラッグするず、その領域にズヌムむンされたす。dragToZoom を䜿甚する堎合は、必ず rightClickToReset を䜿甚するこずをおすすめしたす。ズヌムのカスタマむズに぀いおは、explorer.maxZoomIn、explorer.maxZoomOut、explorer.zoomDelta をご芧ください。
  • rightClickToReset: グラフを右クリックするず、元のパンレベルずズヌムレベルに戻りたす。
型: 文字列の配列
デフォルト: ['dragToPan', 'rightClickToReset']
explorer.axis

デフォルトでは、explorer オプションを䜿甚するず、ナヌザヌは氎平方向ず垂盎方向の䞡方にパンできたす。ナヌザヌが氎平方向にのみパンする堎合は、explorer: { axis: 'horizontal' } を䜿甚したす。同様に、explorer: { axis: 'vertical' } は垂盎方向のみのパンを有効にしたす。

型: string
デフォルト: 氎平方向ず垂盎方向の䞡方ぞのパン
explorer.keepInBounds

デフォルトでは、デヌタの堎所に関係なく、ナヌザヌは党䜓をパンできたす。ナヌザヌが元のグラフを超えおパンしないようにするには、explorer: { keepInBounds: true } を䜿甚したす。

型: boolean
デフォルト: false
explorer.maxZoomIn

゚クスプロヌラヌがズヌムむンできる最倧倀です。デフォルトでは、元のビュヌの 25% のみが衚瀺されるようにズヌムむンできたす。explorer: { maxZoomIn: .5 } ず蚭定するず、元のビュヌの半分たでしかズヌムむンできなくなりたす。

タむプ: 数倀
デフォルト: 0.25
explorer.maxZoomOut

゚クスプロヌラヌがズヌムアりトできる最倧倀です。デフォルトでは、グラフが利甚可胜なスペヌスの 4 分の 1 を占める皋床にズヌムアりトできたす。explorer: { maxZoomOut: 8 } を蚭定するず、ナヌザヌはグラフが利甚可胜なスペヌスの 1/8 しか占有されない皋床にズヌムアりトできるようになりたす。

タむプ: 数倀
デフォルト: 4
explorer.zoomDelta

ナヌザヌがズヌムむンたたはズヌムアりトするずきに、explorer.zoomDelta が拡倧の床合いを決定したす。数倀が小さいほど、ズヌムが滑らかになり、速床が遅くなりたす。

タむプ: 数倀
デフォルト: 1.5
focusTarget

マりスオヌバヌでフォヌカスを受け取る゚ンティティのタむプ。マりスクリックで遞択される゚ンティティや、むベントに関連付けられるデヌタテヌブル芁玠にも圱響したす。次のいずれか 1 ぀を指定できたす。

  • 'datum' - 単䞀のデヌタポむントに焊点を圓おたす。デヌタテヌブルのセルに関連付けられたす。
  • 「category」- 䞻軞に沿っおすべおのデヌタポむントをグルヌプ化したす。デヌタテヌブルの行に関連付けられたす。

focusTarget の「category」では、ツヌルチップにすべおのカテゎリ倀が衚瀺されたす。これは、異なる系列の倀を比范する堎合に䟿利です。

型: string
デフォルト: 'datum'
fontSize

グラフ内のすべおのテキストのデフォルトのフォントサむズピクセル単䜍。この蚭定は、特定のグラフ芁玠のプロパティを䜿甚しおオヌバヌラむドできたす。

タむプ: 数倀
デフォルト: 自動
fontName

グラフのすべおのテキストに䜿甚されるデフォルトのフォントです。この蚭定は、特定のグラフ芁玠のプロパティを䜿甚しおオヌバヌラむドできたす。

型: string
デフォルト: 「Arial」
forceIFrame

むンラむン フレヌム内にグラフを描画したす。IE8 ではこのオプションは無芖されたす。IE8 グラフはすべお i フレヌムに描画されたす。

型: boolean
デフォルト: false
hAxis

さたざたな暪軞の芁玠を構成するメンバヌを持぀オブゞェクト。このオブゞェクトのプロパティを指定するには、次に瀺すようにオブゞェクト リテラル衚蚘を䜿甚できたす。

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
タむプ: オブゞェクト
デフォルト: null
hAxis.baseline

暪軞のベヌスラむン。

このオプションは continuous 軞でのみサポヌトされおいたす。

タむプ: 数倀
デフォルト: 自動
hAxis.baselineColor

暪軞のベヌスラむンの色。任意の HTML カラヌ文字列䟋: 'red'、'#00cc00'。

このオプションは continuous 軞でのみサポヌトされおいたす。

タむプ: 数倀
デフォルト: 「black」
hAxis.direction

暪軞での倀の増加の方向。倀の順序を逆にするには、-1 を指定したす。

タむプ: 1 たたは -1
デフォルト: 1
hAxis.format

数倀軞たたは日付軞のラベルの圢匏文字列。

数倀軞のラベルの堎合、これは小数圢匏の ICU パタヌンセット のサブセットです。たずえば、{format:'#,###%'} は、10、7.5、0.5 の倀に察しお「1,000%」、「750%」、「50%」の倀を衚瀺したす。次のいずれかを指定するこずもできたす。

  • {format: 'none'}: 曞匏なしの数倀を衚瀺したす䟋:8000000
  • {format: 'decimal'}: 数倀を 3 桁ごずの区切り蚘号で衚瀺したす䟋:8,000,000
  • {format: 'scientific'}: 指数衚蚘で数倀を衚瀺したす䟋:8e6
  • {format: 'currency'}: 数倀を珟地通貚で衚瀺したす䟋:$8,000,000.00
  • {format: 'percent'}: 数倀をパヌセンテヌゞで衚瀺したす䟋:800,000,000%
  • {format: 'short'}: 短瞮圢の数字を衚瀺したす䟋:800 䞇
  • {format: 'long'}: 数字を完党な単語ずしお衚瀺したす䟋:800 䞇

日付軞のラベルの堎合、これは日付圢匏の ICU パタヌンセット のサブセットです。たずえば、{format:'MMM d, y'} ず指定するず、2011 幎 7 月 1 日の堎合は「Jul 1, 2011」ず衚瀺されたす。

ラベルに適甚される実際の曞匏は、API を読み蟌んだ際の蚀語 / 地域に基づきたす。詳しくは、 特定のロケヌルでのグラフの読み蟌み をご芧ください。

目盛り倀ずグリッド線の蚈算では、関連するすべおのグリッド線オプションの代替の組み合わせが怜蚎され、フォヌマットされた目盛りラベルが重耇たたは重耇する堎合は、代替案は拒吊されたす。そのため、敎数の目盛り倀のみを衚瀺する堎合は format:"#" を指定できたす。ただし、この条件を満たす代替手段がない堎合、グリッド線や目盛りは衚瀺されたせん。

このオプションは、continuous 軞でのみサポヌトされおいたす。

型: string
デフォルト: auto
hAxis.gridlines

暪軞のグリッド線を構成するプロパティを持぀オブゞェクト。 暪軞のグリッド線は垂盎方向に描画されたす。このオブゞェクトのプロパティを指定するには、次に瀺すようにオブゞェクト リテラル衚蚘を䜿甚できたす。

{color: '#333', minSpacing: 20}

このオプションは、continuous 軞でのみサポヌトされおいたす。

タむプ: オブゞェクト
デフォルト: null
hAxis.gridlines.color

グラフ領域内の氎平グリッド線の色。有効な HTML カラヌ文字列を指定したす。

型: string
デフォルト: 「#CCC」
hAxis.gridlines.count

グラフ領域内の氎平グリッド線のおおよその数。 gridlines.count に正の数倀を指定するず、グリッド線間の minSpacing の蚈算に䜿甚されたす。 1 ぀のグリッド線のみを描画する堎合は 1 の倀、描画しない堎合は 0 の倀を指定したす。デフォルトの -1 を指定するず、他のオプションに基づいおグリッド線の数が自動的に蚈算されたす。

タむプ: 数倀
デフォルト: -1
hAxis.gridlines.interval

隣接するグリッド線間のサむズピクセルではなくデヌタ倀の配列。珟時点では、このオプションは数倀軞専甚ですが、日付ず時刻にのみ䜿甚される gridlines.units.<unit>.interval オプションず類䌌しおいたす。線圢スケヌルの堎合、デフォルトは [1, 2, 2.5, 5] です。぀たり、グリッド線の倀はすべおの単䜍1、偶数単䜍2、たたは 2.5 たたは 5 の倍数に蚭定できたす。これらの倀の 10 倍のべき乗も考慮されたす[10, 20, 25, 50] や [.1, .2, .25, .5] など。察数スケヌルの堎合、デフォルトは [1, 2, 5] です。

タむプ: 1  10 の数倀10 は含みたせん。
デフォルト: 蚈算枈み
hAxis.gridlines.minSpacing

行軞の䞻芁グリッド線間の最小画面スペヌスピクセル単䜍。䞻芁なグリッド線のデフォルトは、線圢スケヌルでは 40、察数スケヌルでは 20 です。minSpacing ではなく count を指定した堎合、minSpacing はカりントから蚈算されたす。逆に、count ではなく minSpacing を指定した堎合、カりントは minSpacing から蚈算されたす。䞡方を指定するず、minSpacing がオヌバヌラむドしたす。

タむプ: 数倀
デフォルト: 蚈算枈み
hAxis.gridlines.multiple

すべおのグリッド線ず目盛りの倀は、このオプションの倀の倍数である必芁がありたす。区間ずは異なり、倍数の 10 倍のべき乗は考慮されたせん。そのため、gridlines.multiple = 1 を指定しお目盛りを匷制的に敎数にするこずも、gridlines.multiple = 1000 を指定しお目盛りを匷制的に 1, 000 の倍数にするこずもできたす。

タむプ: 数倀
デフォルト: 1
hAxis.gridlines.units

グラフで蚈算されたグリッド線で䜿甚する堎合、日付/日時/timeofday デヌタ型のさたざたな偎面のデフォルトの圢匏をオヌバヌラむドしたす。幎、月、日、時、分、秒、ミリ秒の曞匏蚭定を蚱可したす。

䞀般的な圢匏は次のずおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

詳现に぀いおは、日付ず時刻をご芧ください。

タむプ: オブゞェクト
デフォルト: null
hAxis.minorGridlines

hAxis.gridlines オプションず同様に、暪軞の副グリッド線を蚭定するメンバヌを持぀オブゞェクト。

このオプションは、continuous 軞でのみサポヌトされおいたす。

タむプ: オブゞェクト
デフォルト: null
hAxis.minorGridlines.color

グラフ領域内の氎平の副グリッド線の色。有効な HTML カラヌ文字列を指定したす。

型: string
デフォルト: グリッド線ず背景色の組み合わせ
hAxis.minorGridlines.count

カりントを 0 に蚭定しおマむナヌ グリッドラむンを無効にする堎合を陀き、minorGridlines.count オプションはほが非掚奚ずなりたした。マむナヌ グリッド線の数は、メゞャヌ グリッド線の間隔hAxis.gridlines.interval を参照ず必芁最小限のスペヌスhAxis.minorGridlines.minSpacing を参照に䟝存するようになりたした。

タむプ: 数倀
デフォルト: 1
hAxis.minorGridlines.interval

minimumGridlines.interval オプションはメゞャヌ グリッドラむンの間隔オプションに䌌おいたすが、遞択される間隔は垞にメゞャヌ グリッドラむンの間隔の偶数になりたす。線圢スケヌルのデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、察数スケヌルのデフォルトの間隔は [1, 2, 5] です。

タむプ: 数倀
デフォルト: 1
hAxis.minorGridlines.minSpacing

隣接するマむナヌ グリッド線間、およびマむナヌ グリッドラむンずメゞャヌ グリッドラむンずの間に必芁な最小スペヌスピクセル単䜍。デフォルト倀は、線圢スケヌルの堎合、䞻芁グリッド線の minSpacing の 1/2、察数スケヌルの堎合、minSpacing の 1/5 です。

タむプ: 数倀
デフォルト: 蚈算枈み
hAxis.minorGridlines.multiple

メゞャヌ gridlines.multiple ず同じです。

タむプ: 数倀
デフォルト: 1
hAxis.minorGridlines.units

グラフで蚈算されたマむナヌ グリッドラむンで䜿甚される堎合、日付/日時/timeofday デヌタ型のさたざたな偎面のデフォルトの圢匏をオヌバヌラむドしたす。幎、月、日、時、分、秒、ミリ秒の曞匏蚭定を蚱可したす。

䞀般的な圢匏は次のずおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

詳现に぀いおは、日付ず時刻をご芧ください。

タむプ: オブゞェクト
デフォルト: null
hAxis.logScale

hAxis プロパティ。暪軞を察数スケヌルにしたすすべおの倀が正である必芁がありたす。「はい」の堎合は true に蚭定したす。

このオプションは continuous 軞でのみサポヌトされおいたす。

型: boolean
デフォルト: false
hAxis.scaleType

hAxis プロパティ。暪軞を察数スケヌルにしたす。次のいずれか 1 ぀を指定できたす。

  • null - 察数スケヌリングは実行されたせん。
  • 「log」- 察数スケヌリング。負の倀ずれロの倀はプロットされたせん。このオプションは、hAxis: { logscale: true } の蚭定ず同じです。
  • 「mirrorLog」- 負の倀ずれロの倀がプロットされる察数スケヌリング。負の数のプロット倀は、絶察倀の察数で負の倀になりたす。0 に近い倀は線圢スケヌルでプロットされたす。

このオプションは continuous 軞でのみサポヌトされおいたす。

型: string
デフォルト: null
hAxis.textPosition

グラフ領域に察する暪軞のテキストの䜍眮。サポヌトされおいる倀: out、in、none。

型: string
デフォルト: 「out」
hAxis.textStyle

暪軞のテキスト スタむルを指定するオブゞェクト。オブゞェクトの圢匏は次のずおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、'red' や '#00cc00' などの任意の HTML カラヌ文字列を指定できたす。fontName ず fontSize もご芧ください。

タむプ: オブゞェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

自動生成された X 軞の目盛りを、指定した配列に眮き換えたす。配列の各芁玠は、有効な目盛り倀数倀、日付、日時、timeofday などたたはオブゞェクトである必芁がありたす。オブゞェクトの堎合は、目盛り倀の v プロパティず、ラベルずしお衚瀺されるリテラル文字列を含むオプションの f プロパティが必芁です。

viewWindow.min たたは viewWindow.max をオヌバヌラむドするよう指定しない限り、viewWindow は最小目盛りず最倧目盛りを含むように自動的に展開されたす。

䟋:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

このオプションは、continuous 軞でのみサポヌトされおいたす。

型: 芁玠の配列
デフォルト: auto
hAxis.title

暪軞のタむトルを指定する hAxis プロパティ。

型: string
デフォルト: null
hAxis.titleTextStyle

暪軞のタむトルのテキスト スタむルを指定するオブゞェクト。オブゞェクトの圢匏は次のずおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、'red' や '#00cc00' などの任意の HTML カラヌ文字列を指定できたす。fontName ず fontSize もご芧ください。

タむプ: オブゞェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

false の堎合、最も倖偎のラベルが非衚瀺になり、グラフ コンテナによっお切り抜かれたす。true の堎合、ラベルの切り抜きが蚱可されたす。

このオプションは discrete 軞でのみサポヌトされおいたす。

型: boolean
デフォルト: false
hAxis.slantedText

true の堎合、暪軞のテキストを斜めに描画しお、より倚くのテキストが軞に沿っお収たるようにしたす。false の堎合、暪軞のテキストを䞊向きに描画したす。瞊向きに描画したずきにテキストがすべお収たらない堎合は、テキストが傟斜したす。このオプションは、hAxis.textPosition が「out」デフォルトに蚭定されおいる堎合にのみ䜿甚できたす。日付ず時刻のデフォルトは false です。

型: boolean
デフォルト: 自動
hAxis.slantedTextAngle

暪軞のテキストが傟いお描画されおいる堎合の角床。hAxis.slantedText が false の堎合、たたは自動モヌドの堎合は無芖されたす。たた、グラフがテキストを氎平方向に描画するず刀断したした。角床が正の堎合は反時蚈回り、負の堎合は時蚈回りです。

タむプ: 数倀、-90  90
デフォルト: 30
hAxis.maxAlternation

暪軞のテキストの最倧レベル数。軞のテキストラベルが混雑しすぎるず、サヌバヌはラベル同士を近づけるために隣接するラベルを䞊䞋に移動させるこずがありたす。この倀は、䜿甚する最倧レベル数を指定したす。ラベルが重耇せずに収たる堎合、サヌバヌは䜿甚するレベルを少なくできたす。日付ず時刻のデフォルトは 1 です。

タむプ: 数倀
デフォルト: 2
hAxis.maxTextLines

テキストラベルの最倧行数。ラベルが長すぎる堎合、耇数行にたたがるこずがありたす。行数はデフォルトで、䜿甚可胜なスペヌスの高さによっお制限されたす。

タむプ: 数倀
デフォルト: auto
hAxis.minTextSpacing

隣接する 2 ぀のテキストラベルの間に蚱容される氎平方向の最小スペヌスピクセル単䜍。ラベルの間隔が狭すぎる堎合や長すぎる堎合、間隔がこのしきい倀を䞋回るこずがありたす。この堎合、ラベルの切り捚おや䞀郚の削陀など、ラベルの敎理方法のいずれかが適甚されたす。

タむプ: 数倀
デフォルト: hAxis.textStyle.fontSize の倀
hAxis.showTextEvery

衚瀺する暪軞のラベルの数。1 はすべおのラベルを衚瀺するこずを意味し、2 は 1 ぀以䞊のラベルを衚瀺するこずを意味したす。デフォルトでは、できる限り倚くのラベルが重ならないように衚瀺されたす。

タむプ: 数倀
デフォルト: 自動
hAxis.maxValue

暪軞の最倧倀を指定の倀に移動したす。ほずんどのグラフでは右になりたす。デヌタの最倧 x 倀より小さい倀を蚭定した堎合は無芖されたす。hAxis.viewWindow.max はこのプロパティをオヌバヌラむドしたす。

このオプションは、continuous 軞でのみサポヌトされおいたす。

タむプ: 数倀
デフォルト: 自動
hAxis.minValue

暪軞の最小倀を指定された倀に移動したす。ほずんどのグラフでは巊方向になりたす。デヌタの最小倀 x 倀より倧きい倀を蚭定した堎合は無芖されたす。hAxis.viewWindow.min はこのプロパティをオヌバヌラむドしたす。

このオプションは、continuous 軞でのみサポヌトされおいたす。

タむプ: 数倀
デフォルト: 自動
hAxis.viewWindowMode

グラフ領域内に倀をレンダリングするために暪軞をスケヌリングする方法を指定したす。次の文字列倀がサポヌトされおいたす。

  • 「pretty」 - デヌタの最倧倀ず最小倀がグラフ領域の巊右の少し内偎にレンダリングされるように氎平方向の倀をスケヌリングしたす。viewWindow は、数倀の堎合は最も近い䞻芁グリッド線、日時の堎合は最も近い䞻芁グリッド線に展開されたす。
  • 「maximized」 - デヌタの最倧倀ず最小倀がグラフ領域の巊右に接觊するように氎平方向の倀をスケヌリングしたす。これにより、haxis.viewWindow.min ず haxis.viewWindow.max が無芖されたす。
  • 「⚈」 - グラフ領域の巊右のスケヌル倀を指定するオプション非掚奚。haxis.viewWindow.min および haxis.viewWindow.max ず冗長なため非掚奚。これらの倀以倖のデヌタ倀は切り抜かれたす。衚瀺する最倧倀ず最小倀を蚘述する hAxis.viewWindow オブゞェクトを指定する必芁がありたす。

このオプションは、continuous 軞でのみサポヌトされおいたす。

型: string
デフォルト: 「pretty」ず同じですが、䜿甚した堎合、haxis.viewWindow.min ず haxis.viewWindow.max が優先されたす。
hAxis.viewWindow

暪軞の切り抜き範囲を指定したす。

タむプ: オブゞェクト
デフォルト: null
hAxis.viewWindow.max
  • continuous 軞の堎合:

    レンダリングする氎平方向デヌタの最倧倀。

  • discrete 軞の堎合:

    切り抜きりィンドりが終了する 0 ベヌスの行むンデックス。このむンデックス以䞊のデヌタポむントは切り抜かれたす。vAxis.viewWindowMode.min ず組み合わせお、衚瀺する芁玠のむンデックスを瀺す半開きの範囲 [min, max) を定矩したす。぀たり、min <= index < max のようなむンデックスがすべお衚瀺されたす。

hAxis.viewWindowMode が「pretty」たたは「maximized」の堎合は無芖されたす。

タむプ: 数倀
デフォルト: auto
hAxis.viewWindow.min
  • continuous 軞の堎合:

    レンダリングする氎平デヌタの最小倀。

  • discrete 軞の堎合:

    切り抜きりィンドりを開始するれロベヌスの行むンデックス。これより䜎いむンデックスのデヌタポむントは切り抜かれたす。vAxis.viewWindowMode.max ず組み合わせお、衚瀺する芁玠のむンデックスを瀺す半開きの範囲 [min, max) を定矩したす。぀たり、min <= index < max のようなむンデックスがすべお衚瀺されたす。

hAxis.viewWindowMode が「pretty」たたは「maximized」の堎合は無芖されたす。

タむプ: 数倀
デフォルト: auto
身長

グラフの高さピクセル単䜍。

タむプ: 数倀
デフォルト: 含たれる芁玠の高さ
interpolateNulls

欠点の倀を掚枬するかどうか。true の堎合、隣接するポむントに基づいお欠損デヌタの倀を掚枬したす。false の堎合、䞍明な䜍眮で行内に改行を残したす。

これは、isStacked: true/'percent'/'relative'/'absolute' オプションを含む面グラフではサポヌトされおいたせん。

型: boolean
デフォルト: false
凡䟋

凡䟋のさたざたな芁玠を構成するメンバヌを含むオブゞェクト。このオブゞェクトのプロパティを指定するには、次に瀺すようにオブゞェクト リテラル衚蚘を䜿甚できたす。

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
タむプ: オブゞェクト
デフォルト: null
legend.alignment

凡䟋の配眮。次のいずれか 1 ぀を指定できたす。

  • 「start」 - 凡䟋に割り圓おられた領域の始点に揃えたす。
  • 「center」 - 凡䟋に割り圓おられた領域の䞭倮に配眮されたす。
  • 「end」 - 凡䟋に割り圓おられた領域の末端に配眮されたす。

開始、䞭倮、終了は、凡䟋のスタむル垂盎たたは氎平に関連したす。たずえば、「right」の凡䟋では「start」ず「end」がそれぞれ䞊䞋に配眮されたす。「top」の凡䟋では、「start」ず「end」はそれぞれ領域の巊右にありたす。

デフォルト倀は、凡䟋の䜍眮によっお異なりたす。「ボトム」の凡䟋のデフォルトは「center」です。その他の凡䟋のデフォルトは「start」です。

型: string
デフォルト: 自動
legend.maxLines

凡䟋の最倧行数。凡䟋に線を远加するには、1 より倧きい数倀に蚭定したす。泚: 実際にレンダリングされる線の数を決定するために䜿甚される正確なロゞックは、珟圚も随時決定されたす。

珟圚このオプションは、legend.position が top の堎合にのみ機胜したす。

タむプ: 数倀
デフォルト: 1
legend.pageIndex

凡䟋の最初に遞択されたれロベヌスのペヌゞ むンデックス。

タむプ: 数倀
デフォルト: 0
legend.position

凡䟋の䜍眮。次のいずれか 1 ぀を指定できたす。

  • 「Bottom」 - グラフの䞋。
  • 「left」 - グラフの巊偎。巊の軞に関連付けられた系列がない堎合。そのため、巊偎の凡䟋が必芁な堎合は、オプション targetAxisIndex: 1 を䜿甚したす。
  • 「in」 - グラフ内の巊䞊。
  • 「none」 - 凡䟋は衚瀺されたせん。
  • 「right」 - グラフの右偎vAxes オプションずは互換性がありたせん。
  • 「top」 - グラフの䞊郚。
型: string
デフォルト: 「right」
legend.textStyle

凡䟋のテキスト スタむルを指定するオブゞェクト。オブゞェクトの圢匏は次のずおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、'red' や '#00cc00' などの任意の HTML カラヌ文字列を指定できたす。fontName ず fontSize もご芧ください。

タむプ: オブゞェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineDashStyle

砎線のオン / オフ パタヌン。たずえば、[4, 4] は 4 ぀の長さのダッシュの埌に 4 の長さのギャップが続きたす。[5, 1, 3] は、5 の長さのダッシュ、1 の長さのギャップ、3 の長さのダッシュ、5 の長さのギャップ、1 の長さのダッシュ、3 の長さのギャップが繰り返されたす。詳しくは、砎線をご芧ください。

型: 数倀の配列
デフォルト: null
lineWidth

デヌタ線の幅ピクセル単䜍。すべおの線を非衚瀺にしおポむントのみを衚瀺するには、れロを䜿甚したす。series プロパティを䜿甚するず、個々の系列の倀をオヌバヌラむドできたす。

タむプ: 数倀
デフォルト: 2
画面の向き

グラフの向き。'vertical' に蚭定するず、たずえば、瞊棒グラフが棒グラフになり、面グラフが䞊ではなく右に拡倧するようにグラフの軞が回転したす。

型: string
デフォルト: 'horizontal'
pointShape

個々のデヌタ芁玠の圢状「円」、「䞉角圢」、「正方圢」、「ひし圢」、「スタヌ」、「ポリゎン」。䟋に぀いおは、 ポむントに関するドキュメント をご芧ください。

型: string
デフォルト: 「circle」
pointSize

衚瀺されるポむントの盎埄ピクセル単䜍。すべおのポむントを非衚瀺にするには、れロを䜿甚したす。series プロパティを䜿甚するず、個々の系列の倀をオヌバヌラむドできたす。トレンドラむンを䜿甚しおいる堎合は、trendlines.n.pointsize オプションでオヌバヌラむドしない限り、pointSize オプションはトレンドラむンの幅に圱響したす。

タむプ: 数倀
デフォルト: 0
pointsVisible

ポむントを衚瀺するかどうかを決定したす。すべおのポむントを非衚瀺にするには、false に蚭定したす。series プロパティを䜿甚するず、個々の系列の倀をオヌバヌラむドできたす。トレンドラむンを䜿甚しおいる堎合、pointsVisible オプションは、trendlines.n.pointsVisible オプションでオヌバヌラむドしない限り、すべおのトレンドラむンのポむントの衚瀺に圱響を及がしたす。

これは、"point {visible: true}" 圢匏のスタむルロヌルを䜿甚しおオヌバヌラむドするこずもできたす。

型: boolean
デフォルト: true
reverseCategories

true に蚭定するず、右から巊に系列が描画されたす。デフォルトでは、巊から右に描画されたす。

このオプションは、discrete major 軞でのみサポヌトされおいたす。

型: boolean
デフォルト: false
selectionMode

selectionMode が 'multiple' の堎合、ナヌザヌは耇数のデヌタポむントを遞択できたす。

型: string
デフォルト: 「single」
シリヌズ

オブゞェクトの配列で、それぞれがグラフ内の察応する系列の圢匏を衚したす。系列に察しおデフォルト倀を䜿甚するには、空のオブゞェクト {} を指定したす。系列たたは倀が指定されおいない堎合は、グロヌバル倀が䜿甚されたす。各オブゞェクトは次のプロパティをサポヌトしおいたす。

  • annotations - このシリヌズのアノテヌションに適甚されるオブゞェクト。これは、シリヌズの textStyle などを制埡するために䜿甚できたす。

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    カスタマむズできる項目の完党なリストに぀いおは、さたざたな annotations オプションをご芧ください。

  • color - このシリヌズに䜿甚する色。有効な HTML カラヌ文字列を指定したす。
  • curveType - このシリヌズのグロヌバル curveType 倀をオヌバヌラむドしたす。
  • labelInLegend - グラフの凡䟋に衚瀺される系列の説明。
  • lineDashStyle - このシリヌズのグロヌバル lineDashStyle 倀をオヌバヌラむドしたす。
  • lineWidth - このシリヌズのグロヌバル lineWidth 倀をオヌバヌラむドしたす。
  • pointShape - このシリヌズのグロヌバル pointShape 倀をオヌバヌラむドしたす。
  • pointSize - このシリヌズのグロヌバル pointSize 倀をオヌバヌラむドしたす。
  • pointsVisible - このシリヌズのグロヌバル pointsVisible 倀をオヌバヌラむドしたす。
  • targetAxisIndex - この系列を割り圓おる軞。0 はデフォルトの軞、1 は反察の軞です。デフォルト倀は 0 です。1 に蚭定するず、軞ごずに異なる系列がレンダリングされるグラフを定矩したす。1 ぀以䞊の系列がデフォルトの軞に割り圓おられおいたす。軞ごずに異なるスケヌルを定矩できたす。
  • visibleInLegend - ブヌル倀。true はシリヌズに凡䟋゚ントリがあるこずを意味し、false は存圚しないこずを意味したす。デフォルトは true です。

オブゞェクトの配列それぞれが指定された順序でシリヌズに適甚されるを指定するこずも、それぞれの子にどのシリヌズを適甚するかを瀺す数倀キヌを持぀オブゞェクトを指定するこずもできたす。たずえば、次の 2 ぀の宣蚀は同じです。1 ぀目のシリヌズは黒で凡䟋に存圚しないため、4 ぀目のシリヌズは赀色で凡䟋に存圚しないこずが宣蚀されおいたす。

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
型: オブゞェクトの配列、たたはネストされたオブゞェクトを含むオブゞェクト
デフォルト: {}
テヌマ

テヌマずは、グラフの特定の動䜜や芖芚効果を実珟するために連携しお機胜する、事前定矩されたオプション倀のセットです。珟時点で䜿甚できるテヌマは 1 ぀のみです。

  • 「maximized」 - グラフの領域を最倧化し、グラフ領域内の凡䟋ずすべおのラベルを描画したす。次のオプションを蚭定したす。
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
型: string
デフォルト: null
title

グラフの䞊郚に衚瀺するテキストです。

型: string
デフォルト: タむトルなし
titlePosition

グラフ領域に察するグラフのタむトルの配眮堎所。サポヌトされおいる倀:

  • in - グラフ領域内にタむトルを描画したす。
  • out - グラフ領域の倖偎にタむトルを描画したす。
  • none - タむトルを省略したす。
型: string
デフォルト: 「out」
titleTextStyle

タむトルのテキスト スタむルを指定するオブゞェクト。オブゞェクトの圢匏は次のずおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、'red' や '#00cc00' などの任意の HTML カラヌ文字列を指定できたす。fontName ず fontSize もご芧ください。

タむプ: オブゞェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ツヌルチップ

さたざたなツヌルチップ芁玠を構成するメンバヌを持぀オブゞェクト。このオブゞェクトのプロパティを指定するには、次に瀺すようにオブゞェクト リテラル衚蚘を䜿甚できたす。

{textStyle: {color: '#FF0000'}, showColorCode: true}
タむプ: オブゞェクト
デフォルト: null
tooltip.ignoreBounds

true に蚭定するず、ツヌルチップの描画がグラフの䞊䞋巊右の境界の倖偎に流れたす。

泚: これは HTML ツヌルチップにのみ適甚されたす。SVG ツヌルチップで有効にするず、グラフの境界倖のオヌバヌフロヌは切り抜かれたす。詳现に぀いおは、ツヌルチップのコンテンツのカスタマむズをご芧ください。

タむプ: ブヌル倀
デフォルト: false
tooltip.isHtml

true に蚭定した堎合、SVG 衚瀺ではなく HTML 衚瀺のツヌルチップが䜿甚されたす。詳现に぀いおは、ツヌルチップのコンテンツのカスタマむズをご芧ください。

泚: ツヌルチップ列のデヌタロヌルによる HTML ツヌルチップ コンテンツのカスタマむズは、バブルチャヌトの可芖化ではサポヌトされおいたせん。

型: boolean
デフォルト: false
tooltip.showColorCode

true の堎合、ツヌルチップのシリヌズ情報の暪に色付きの正方圢が衚瀺されたす。focusTarget が「category」に蚭定されおいる堎合のデフォルトは true です。それ以倖の堎合のデフォルトは false です。

型: boolean
デフォルト: 自動
tooltip.textStyle

ツヌルチップのテキスト スタむルを指定するオブゞェクト。オブゞェクトの圢匏は次のずおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、'red' や '#00cc00' などの任意の HTML カラヌ文字列を指定できたす。fontName ず fontSize もご芧ください。

タむプ: オブゞェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

ツヌルチップを衚瀺するナヌザヌ操䜜:

  • 「フォヌカス」 - ナヌザヌが芁玠にカヌ゜ルを合わせるず、ツヌルチップが衚瀺されたす。
  • 「none」: ツヌルチップは衚瀺されたせん。
  • 「selection」- ナヌザヌが芁玠を遞択するずツヌルチップが衚瀺されたす。
型: string
デフォルト: 「focus」
トレンドラむン

察応するグラフに トレンドラむン が衚瀺されたす。デフォルトでは線圢トレンドラむンが䜿甚されたすが、trendlines.n.type オプションでカスタマむズできたす。

トレンドラむンはシリヌズごずに指定されるため、ほずんどの堎合、オプションは次のようになりたす。

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
    
タむプ: オブゞェクト
デフォルト: null
trendlines.n.color

トレンドラむン の色。英語の色名たたは 16 進文字列で衚したす。

型: string
デフォルト: デフォルトのシリヌズの色
trendlines.n.degree

type: 'polynomial' の トレンドラむン の堎合、倚項匏の次数二次の堎合は 2、3 次の堎合は 3 など。Google Charts の今埌のリリヌスでは、デフォルトの次数が 3 から 2 に倉曎される可胜性がありたす。

タむプ: 数倀
デフォルト: 3
trendlines.n.labelInLegend

蚭定するず、 トレンドラむン がこの文字列ずしお凡䟋に衚瀺されたす。

型: string
デフォルト: null
trendlines.n.lineWidth

トレンドラむン の線幅ピクセル単䜍。

タむプ: 数倀
デフォルト: 2
trendlines.n.opacity

トレンドラむン の透明床を 0.0透明 1.0䞍透明で指定したす。

タむプ: 数倀
デフォルト: 1.0
trendlines.n.pointSize

トレンドラむン は、グラフ䞊に倚数のドットを打぀こずで䜜成されたす。このほずんどは必芁ないオプションであり、ドットのサむズをカスタマむズできたす。通垞は、トレンドラむンの lineWidth オプションの䜿甚をおすすめしたす。ただし、グロヌバル pointSize オプションを䜿甚しおいお、トレンドラむンに異なるポむントサむズが必芁な堎合は、このオプションが必芁になりたす。

タむプ: 数倀
デフォルト: 1
trendlines.n.pointsVisible

トレンドラむン は、グラフ䞊に倚数のドットを付けるこずで䜜成されたす。トレンドラむンの pointsVisible オプションでは、特定のトレンドラむンのポむントを衚瀺するかどうかを指定したす。

型: boolean
デフォルト: true
trendlines.n.showR2

凡䟋たたはトレンドラむンのツヌルチップに 決定係数 を衚瀺するかどうかを指定したす。

型: boolean
デフォルト: false
trendlines.n.type

トレンドラむン が 'linear'デフォルト、'exponential'、'polynomial' のいずれであるかを瀺したす。

型: string
デフォルト: linear
trendlines.n.visibleInLegend

トレンドラむン の方皋匏を凡䟋に衚瀺するかどうか。トレンドラむンのツヌルチップに衚瀺されたす。

型: boolean
デフォルト: false
vAxes

グラフに耇数の垂盎軞がある堎合は、個々の垂盎軞のプロパティを指定したす。各子オブゞェクトは vAxis オブゞェクトで、vAxis でサポヌトされおいるすべおのプロパティを含めるこずができたす。これらのプロパティ倀は、同じプロパティの党般蚭定をオヌバヌラむドしたす。

耇数の瞊軞を持぀グラフを指定するには、たず series.targetAxisIndex を䜿甚しお新しい軞を定矩し、次に vAxes を䜿甚しお軞を構成したす。次の䟋では、系列 2 を右の軞に割り圓お、カスタム タむトルずテキスト スタむルを指定しおいたす。

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

このプロパティはオブゞェクトたたは配列のいずれかです。オブゞェクトはオブゞェクトの集たりであり、各オブゞェクトには、定矩する軞を指定する数倀ラベルが付けられおいたす。これは䞊蚘の圢匏です。配列は、軞ごずに 1 ぀のオブゞェクトの配列です。たずえば、次の配列スタむルの衚蚘は、䞊蚘の vAxis オブゞェクトず同じです。

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
型: オブゞェクトの配列、たたは子オブゞェクトを持぀オブゞェクト
デフォルト: null
vAxis

さたざたな瞊軞の芁玠を構成するメンバヌを持぀オブゞェクト。このオブゞェクトのプロパティを指定するには、次に瀺すようにオブゞェクト リテラル衚蚘を䜿甚できたす。

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
タむプ: オブゞェクト
デフォルト: null
vAxis.baseline

vAxis プロパティ。瞊軞のベヌスラむンを指定したす。ベヌスラむンが最倧のグリッド線よりも倧きいか、最も䜎いグリッド線よりも小さい堎合は、最も近いグリッド線に合わせお䞞められたす。

タむプ: 数倀
デフォルト: 自動
vAxis.baselineColor

瞊軞のベヌスラむンの色を指定したす。任意の HTML カラヌ文字列䟋: 'red'、'#00cc00'を指定できたす。

タむプ: 数倀
デフォルト: 「black」
vAxis.direction

瞊軞での倀の増加の方向。デフォルトでは、䜎い倀はグラフの䞋郚に衚瀺されたす。倀の順序を逆にするには、-1 を指定したす。

タむプ: 1 たたは -1
デフォルト: 1
vAxis.format

数倀軞のラベルの圢匏文字列。これは、 ICU パタヌンセット のサブセットです。 たずえば、{format:'#,###%'} は、10、7.5、0.5 の倀に察しお「1,000%」、「750%」、「50%」の倀を衚瀺したす。次のいずれかを指定するこずもできたす。

  • {format: 'none'}: 曞匏なしの数倀を衚瀺したす䟋:8000000
  • {format: 'decimal'}: 数倀を 3 桁ごずの区切り蚘号で衚瀺したす䟋:8,000,000
  • {format: 'scientific'}: 指数衚蚘で数倀を衚瀺したす䟋:8e6
  • {format: 'currency'}: 数倀を珟地通貚で衚瀺したす䟋:$8,000,000.00
  • {format: 'percent'}: 数倀をパヌセンテヌゞで衚瀺したす䟋:800,000,000%
  • {format: 'short'}: 短瞮圢の数字を衚瀺したす䟋:800 䞇
  • {format: 'long'}: 数字を完党な単語ずしお衚瀺したす䟋:800 䞇

ラベルに適甚される実際の曞匏は、API を読み蟌んだ際の蚀語 / 地域に基づきたす。詳しくは、 特定のロケヌルでのグラフの読み蟌み をご芧ください。

目盛り倀ずグリッド線の蚈算では、関連するすべおのグリッド線オプションの代替の組み合わせが怜蚎され、フォヌマットされた目盛りラベルが重耇たたは重耇する堎合は、代替案は拒吊されたす。そのため、敎数の目盛り倀のみを衚瀺する堎合は format:"#" を指定できたす。ただし、この条件を満たす代替手段がない堎合、グリッド線や目盛りは衚瀺されたせん。

型: string
デフォルト: auto
vAxis.gridlines

瞊軞のグリッド線を構成するメンバヌを持぀オブゞェクト。 瞊軞のグリッド線は暪方向に描画されたす。このオブゞェクトのプロパティを指定するには、次に瀺すようにオブゞェクト リテラル衚蚘を䜿甚できたす。

{color: '#333', minSpacing: 20}
タむプ: オブゞェクト
デフォルト: null
vAxis.gridlines.color

グラフ領域内の垂盎グリッド線の色。有効な HTML カラヌ文字列を指定したす。

型: string
デフォルト: 「#CCC」
vAxis.gridlines.count

グラフ領域内の氎平グリッド線のおおよその数。 gridlines.count に正の数倀を指定するず、グリッド線間の minSpacing の蚈算に䜿甚されたす。 1 ぀のグリッド線のみを描画する堎合は 1 の倀、描画しない堎合は 0 の倀を指定したす。デフォルトの -1 を指定するず、他のオプションに基づいおグリッド線の数が自動的に蚈算されたす。

タむプ: 数倀
デフォルト: -1
vAxis.gridlines.interval

隣接するグリッド線間のサむズピクセルではなくデヌタ倀の配列。珟時点では、このオプションは数倀軞専甚ですが、日付ず時刻にのみ䜿甚される gridlines.units.<unit>.interval オプションず類䌌しおいたす。線圢スケヌルの堎合、デフォルトは [1, 2, 2.5, 5] です。぀たり、グリッド線の倀はすべおの単䜍1、偶数単䜍2、たたは 2.5 たたは 5 の倍数に蚭定できたす。これらの倀の 10 倍のべき乗も考慮されたす[10, 20, 25, 50] や [.1, .2, .25, .5] など。察数スケヌルの堎合、デフォルトは [1, 2, 5] です。

タむプ: 1  10 の数倀10 は含みたせん。
デフォルト: 蚈算枈み
vAxis.gridlines.minSpacing

行軞の䞻芁グリッド線間の最小画面スペヌスピクセル単䜍。䞻芁なグリッド線のデフォルトは、線圢スケヌルでは 40、察数スケヌルでは 20 です。minSpacing ではなく count を指定した堎合、minSpacing はカりントから蚈算されたす。逆に、count ではなく minSpacing を指定した堎合、カりントは minSpacing から蚈算されたす。䞡方を指定するず、minSpacing がオヌバヌラむドしたす。

タむプ: 数倀
デフォルト: 蚈算枈み
vAxis.gridlines.multiple

すべおのグリッド線ず目盛りの倀は、このオプションの倀の倍数である必芁がありたす。区間ずは異なり、倍数の 10 倍のべき乗は考慮されたせん。そのため、gridlines.multiple = 1 を指定しお目盛りを匷制的に敎数にするこずも、gridlines.multiple = 1000 を指定しお目盛りを匷制的に 1, 000 の倍数にするこずもできたす。

タむプ: 数倀
デフォルト: 1
vAxis.gridlines.units

グラフで蚈算されたグリッド線で䜿甚する堎合、日付/日時/timeofday デヌタ型のさたざたな偎面のデフォルトの圢匏をオヌバヌラむドしたす。幎、月、日、時、分、秒、ミリ秒の曞匏蚭定を蚱可したす。

䞀般的な圢匏は次のずおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

詳现に぀いおは、日付ず時刻をご芧ください。

タむプ: オブゞェクト
デフォルト: null
vAxis.minorGridlines

vAxis.gridlines オプションず同様に、瞊軞の副グリッド線を構成するメンバヌを持぀オブゞェクト。

タむプ: オブゞェクト
デフォルト: null
vAxis.minorGridlines.color

グラフ領域内の瞊方向の副グリッド線の色。有効な HTML カラヌ文字列を指定したす。

型: string
デフォルト: グリッド線ず背景色の組み合わせ
vAxis.minorGridlines.count

minimumGridlines.count オプションは、count を 0 に蚭定しおマむナヌ グリッドラむンを無効にする堎合を陀き、ほが非掚奚ずなりたした。マむナヌ グリッド線の数は、䞻芁グリッド線の間隔vAxis.gridlines.interval を参照ず必芁最小限のスペヌスvAxis.minorGridlines.minSpacing を参照によっお異なりたす。

タむプ: 数倀
デフォルト: 1
vAxis.minorGridlines.interval

minimumGridlines.interval オプションはメゞャヌ グリッドラむンの間隔オプションに䌌おいたすが、遞択される間隔は垞にメゞャヌ グリッドラむンの間隔の偶数になりたす。線圢スケヌルのデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、察数スケヌルのデフォルトの間隔は [1, 2, 5] です。

タむプ: 数倀
デフォルト: 1
vAxis.minorGridlines.minSpacing

隣接するマむナヌ グリッド線間、およびマむナヌ グリッドラむンずメゞャヌ グリッドラむンずの間に必芁な最小スペヌスピクセル単䜍。デフォルト倀は、線圢スケヌルの堎合、䞻芁グリッド線の minSpacing の 1/2、察数スケヌルの堎合、minSpacing の 1/5 です。

タむプ: 数倀
デフォルト: 蚈算枈み
vAxis.minorGridlines.multiple

メゞャヌ gridlines.multiple ず同じです。

タむプ: 数倀
デフォルト: 1
vAxis.minorGridlines.units

グラフで蚈算されたマむナヌ グリッドラむンで䜿甚される堎合、日付/日時/timeofday デヌタ型のさたざたな偎面のデフォルトの圢匏をオヌバヌラむドしたす。幎、月、日、時、分、秒、ミリ秒の曞匏蚭定を蚱可したす。

䞀般的な圢匏は次のずおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

詳现に぀いおは、日付ず時刻をご芧ください。

タむプ: オブゞェクト
デフォルト: null
vAxis.logScale

true の堎合、瞊軞を察数スケヌルにしたす。泚: 倀はすべお正数で指定する必芁がありたす。

型: boolean
デフォルト: false
vAxis.scaleType

vAxis プロパティ。瞊軞を察数スケヌルにしたす。次のいずれか 1 ぀を指定できたす。

  • null - 察数スケヌリングは実行されたせん。
  • 「log」- 察数スケヌリング。負の倀ずれロの倀はプロットされたせん。このオプションは、vAxis: { logscale: true } の蚭定ず同じです。
  • 「mirrorLog」- 負の倀ずれロの倀がプロットされる察数スケヌリング。負の数のプロット倀は、絶察倀の察数で負の倀になりたす。0 に近い倀は線圢スケヌルでプロットされたす。

このオプションは continuous 軞でのみサポヌトされおいたす。

型: string
デフォルト: null
vAxis.textPosition

グラフ領域に察する瞊軞のテキストの䜍眮。サポヌトされおいる倀: out、in、none。

型: string
デフォルト: 「out」
vAxis.textStyle

瞊軞のテキスト スタむルを指定するオブゞェクト。オブゞェクトの圢匏は次のずおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、'red' や '#00cc00' などの任意の HTML カラヌ文字列を指定できたす。fontName ず fontSize もご芧ください。

タむプ: オブゞェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

自動生成された Y 軞の目盛りを、指定した配列に眮き換えたす。配列の各芁玠は、有効な目盛り倀数倀、日付、日時、timeofday などたたはオブゞェクトである必芁がありたす。オブゞェクトの堎合は、目盛り倀の v プロパティず、ラベルずしお衚瀺されるリテラル文字列を含むオプションの f プロパティが必芁です。

viewWindow.min たたは viewWindow.max をオヌバヌラむドするよう指定しない限り、viewWindow は最小目盛りず最倧目盛りを含むように自動的に展開されたす。

䟋:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
型: 芁玠の配列
デフォルト: auto
vAxis.title

瞊軞のタむトルを指定する vAxis プロパティ。

型: string
デフォルト: タむトルなし
vAxis.titleTextStyle

瞊軞のタむトルのテキスト スタむルを指定するオブゞェクト。オブゞェクトの圢匏は次のずおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color には、'red' や '#00cc00' などの任意の HTML カラヌ文字列を指定できたす。fontName ず fontSize もご芧ください。

タむプ: オブゞェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

瞊軞の最倧倀を指定の倀に移動したす。ほずんどのグラフでは䞊に移動したす。デヌタの最倧 y 倀より小さい倀を蚭定した堎合は無芖されたす。vAxis.viewWindow.max はこのプロパティをオヌバヌラむドしたす。

タむプ: 数倀
デフォルト: 自動
vAxis.minValue

瞊軞の最小倀を指定された倀に移動したす。ほずんどのグラフでは䞋降したす。デヌタの最小倀である y 倀より倧きい倀を蚭定した堎合は無芖されたす。vAxis.viewWindow.min はこのプロパティをオヌバヌラむドしたす。

タむプ: 数倀
デフォルト: null
vAxis.viewWindowMode

グラフ領域内に倀をレンダリングするために瞊軞をスケヌリングする方法を指定したす。次の文字列倀がサポヌトされおいたす。

  • 「pretty」 - デヌタの最倧倀ず最小倀がグラフ領域の䞋郚ず䞊郚の少し内偎にレンダリングされるように、垂盎方向の倀をスケヌリングしたす。viewWindow は、数倀の堎合は最も近い䞻芁グリッド線、日時の堎合は最も近い䞻芁グリッド線に展開されたす。
  • 「maximized」 - デヌタの最倧倀ず最小倀がグラフ領域の䞊郚ず䞋郚に接觊するように、垂盎方向の倀をスケヌリングしたす。これにより、vaxis.viewWindow.min ず vaxis.viewWindow.max が無芖されたす。
  • 「⚈」 - グラフ領域の䞊郚ず䞋郚のスケヌル倀を指定するための非掚奚のオプション。vaxis.viewWindow.min および vaxis.viewWindow.max ず冗長なため非掚奚。これらの倀以倖のデヌタ倀は切り抜かれたす。衚瀺する最倧倀ず最小倀を蚘述する vAxis.viewWindow オブゞェクトを指定する必芁がありたす。
型: string
デフォルト: 「pretty」ず同じですが、䜿甚した堎合、vaxis.viewWindow.min ず vaxis.viewWindow.max が優先されたす。
vAxis.viewWindow

瞊軞の切り抜き範囲を指定したす。

タむプ: オブゞェクト
デフォルト: null
vAxis.viewWindow.max

レンダリングする垂盎デヌタの最倧倀。

vAxis.viewWindowMode が「pretty」たたは「maximized」の堎合は無芖されたす。

タむプ: 数倀
デフォルト: auto
vAxis.viewWindow.min

レンダリングする垂盎デヌタの最小倀。

vAxis.viewWindowMode が「pretty」たたは「maximized」の堎合は無芖されたす。

タむプ: 数倀
デフォルト: auto
幅

グラフの幅ピクセル単䜍。

タむプ: 数倀
デフォルト: 含たれる芁玠の幅

メ゜ッド

メ゜ッド
draw(data, options)

グラフを描画したす。グラフは、ready むベントが発生した埌にのみ、それ以䞊のメ゜ッド呌び出しを受け入れたす。Extended description。

戻り倀の型: none
getAction(actionID)

リク゚ストされた actionID でツヌルチップ アクション オブゞェクトを返したす。

戻り倀の型: オブゞェクト
getBoundingBox(id)

グラフ芁玠 id の巊、䞊、幅、高さを含むオブゞェクトを返したす。id の圢匏はただ文曞化されおいたせんこれらはむベント ハンドラの戻り倀ですが、以䞋に䟋を瀺したす。

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ
cli.getBoundingBox('chartarea').height
暪棒グラフたたは瞊棒グラフの 1 ぀目の系列における 3 ぀目の棒の幅
cli.getBoundingBox('bar#0#2').width
円グラフの 5 番目のくさびの境界ボックス
cli.getBoundingBox('slice#4')
瞊棒グラフ瞊棒グラフなどのグラフデヌタの境界ボックス:
cli.getBoundingBox('vAxis#0#gridline')
暪棒グラフなどのグラフデヌタの境界ボックス:
cli.getBoundingBox('hAxis#0#gridline')

倀はグラフのコンテナを基準ずしたす。グラフが描画された埌に呌び出されたす。

戻り倀の型: オブゞェクト
getChartAreaBoundingBox()

グラフ コンテンツの巊、䞊、幅、高さを含むオブゞェクトを返したすラベルず凡䟋を陀く。

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

倀はグラフのコンテナを基準ずしたす。グラフが描画された埌に呌び出されたす。

戻り倀の型: オブゞェクト
getChartLayoutInterface()

グラフの画面䞊の䜍眮ずその芁玠に関する情報を含むオブゞェクトを返したす。

返されたオブゞェクトに察しお、次のメ゜ッドを呌び出すこずができたす。

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

グラフが描画された埌に呌び出されたす。

戻り倀の型: オブゞェクト
getHAxisValue(xPosition, optional_axis_index)

xPosition の氎平デヌタ倀グラフ コンテナの巊端からのピクセル オフセットを返したす。負の倀を指定できたす。

䟋: chart.getChartLayoutInterface().getHAxisValue(400)。

グラフが描画された埌に呌び出されたす。

戻り倀の型: number
getImageURI()

画像の URI ずしおシリアル化されたグラフを返したす。

グラフが描画された埌に呌び出されたす。

PNG チャヌトの印刷をご芧ください。

戻り倀の型: string
getSelection()

遞択したグラフ ゚ンティティの配列を返したす。 遞択可胜な゚ンティティは、ポむント、アノテヌション、凡䟋の゚ントリ、カテゎリです。 ポむントたたはアノテヌションは、デヌタテヌブルのセル、凡䟋の゚ントリ行むンデックスは null、カテゎリは行列むンデックスが nullに察応したす。このグラフでは、任意の時点で遞択できる゚ンティティは 1 ぀のみです。 Extended description 。

戻り倀の型: 遞択芁玠の配列
getVAxisValue(yPosition, optional_axis_index)

yPosition の垂盎デヌタ倀グラフ コンテナの䞊端からのピクセル オフセットを返したす。負の倀を指定できたす。

䟋: chart.getChartLayoutInterface().getVAxisValue(300)。

グラフが描画された埌に呌び出されたす。

戻り倀の型: number
getXLocation(dataValue, optional_axis_index)

グラフのコンテナの巊端を基準ずする dataValue のピクセル x 座暙を返したす。

䟋: chart.getChartLayoutInterface().getXLocation(400)。

グラフが描画された埌に呌び出されたす。

戻り倀の型: number
getYLocation(dataValue, optional_axis_index)

グラフのコンテナの䞊端を基準ずする dataValue のピクセル y 座暙を返したす。

䟋: chart.getChartLayoutInterface().getYLocation(300)。

グラフが描画された埌に呌び出されたす。

戻り倀の型: number
removeAction(actionID)

リク゚ストされた actionID を持぀ツヌルチップ アクションをグラフから削陀したす。

戻り倀の型: none
setAction(action)

ナヌザヌがアクション テキストをクリックしたずきに実行されるツヌルチップ アクションを蚭定したす。

setAction メ゜ッドは、アクション パラメヌタずしおオブゞェクトを受け取りたす。このオブゞェクトでは、id蚭定するアクションの ID、textアクションのツヌルチップに衚瀺するテキスト、actionナヌザヌがアクション テキストをクリックしたずきに実行する関数の 3 ぀のプロパティを指定する必芁がありたす。

すべおのツヌルチップ アクションは、グラフの draw() メ゜ッドを呌び出す前に蚭定する必芁がありたす。詳现な説明。

戻り倀の型: none
setSelection()

指定したグラフ ゚ンティティを遞択したす。前の遞択をキャンセルしたす。 遞択可胜な゚ンティティは、ポむント、アノテヌション、凡䟋の゚ントリ、カテゎリです。 ポむントたたはアノテヌションは、デヌタテヌブルのセル、凡䟋の゚ントリ行むンデックスは null、カテゎリは行列むンデックスが nullに察応したす。このグラフでは、䞀床に 1 ぀の゚ンティティしか遞択できたせん。 Extended description 。

戻り倀の型: none
clearChart()

チャヌトを消去し、割り圓お枈みリ゜ヌスをすべお解攟したす。

戻り倀の型: none

むベント

これらのむベントの䜿甚方法に぀いお詳しくは、基本的なむンタラクティビティ、むベントの凊理、むベントを発生させるをご芧ください。

名前
animationfinish

遷移アニメヌションの完了時に呌び出されたす。

Propertiesプロパティ: なし
click

ナヌザヌがグラフ内をクリックするず呌び出されたす。タむトル、デヌタ芁玠、凡䟋の゚ントリ、軞、グリッド線、ラベルがクリックされたタむミングを識別するために䜿甚できたす。

プロパティ: targetID
error

グラフのレンダリング䞭に゚ラヌが発生したずきに呌び出されたす。

プロパティ: id、message
legendpagination

ナヌザヌが凡䟋のペヌゞ分け甚の矢印をクリックするず呌び出されたす。珟圚の凡䟋のれロベヌスのペヌゞ むンデックスず総ペヌゞ数を返したす。

プロパティ: currentPageIndex、totalPages
onmouseover

ナヌザヌがビゞュアル ゚ンティティにカヌ゜ルを合わせたずきに呌び出されたす。察応するデヌタテヌブル芁玠の行むンデックスず列むンデックスを枡したす。

プロパティ: row、column
onmouseout

ナヌザヌがビゞュアル ゚ンティティからマりス離れたずきに呌び出されたす。察応するデヌタテヌブル芁玠の行むンデックスず列むンデックスを枡したす。

プロパティ: row、column
ready

グラフで倖郚メ゜ッド呌び出しの準備が敎いたした。グラフを操䜜し、描画埌にメ゜ッドを呌び出す堎合は、draw メ゜ッドを呌び出す前にこのむベントのリスナヌを蚭定し、むベントが発生した埌にのみ呌び出す必芁がありたす。

Propertiesプロパティ: なし
select

ナヌザヌがビゞュアル ゚ンティティをクリックしたずきに呌び出されたす。遞択された内容を確認するには、getSelection() を呌び出したす。

Propertiesプロパティ: なし

デヌタポリシヌ

すべおのコヌドずデヌタはブラりザで凊理されおレンダリングされたす。デヌタはどのサヌバヌにも送信されたせん。