Googleの折れ線グラフデュアルY軸の問題

Question

Iは、X軸に表示する日付とY軸上の身長と体重の両方を持つことですデュアルY軸折れ線グラフに取り組んでいます：

I私のMySQLデータベースからデータを引き出し、JSONに、それをコード示すようにグラフを描画する私の関数に渡すmは」

JSONは私のPHPのビットから戻され、このようになります。

['2016-07-27',51,3.4],['2016-08-03',52,4],['2016-08-10',53,5],['2016-08-17',54,6],['2016-08-24',55,7],['2016-08-31',56,8], 

私の出力上に示したように、私は唯一の（高さ）1 Y軸を取得し、

と私のチャート軸は、対応する名前

で標識されていない中で指摘されて感謝します。このようになります> 01からデュアルYチャート
を構築するために、質問に使用される右方向

Answer 1

固有の設定オプションが材質チャートだけをするためのものです

var optionsMatl = { 
    title: 'Height-Weight graph', 
    width: 900, 
    height: 500, 
    series: { 
    0: {axis: 'Height'}, 
    1: {axis: 'Weight'} 
    }, 
    axes: { 
    y: { 
     Height: {label: 'Height (cm)'}, 
     Weight: {label: 'Weight (kg)'} 
    } 
    } 
}; 

オプションの異なるセットがクラシックチャートでデュアルYチャート
を構築するために必要とされる - Dual-Y Chartsのドキュメントから>google.visualization.LineChart

var optionsCore = { 
    title: 'Height-Weight graph', 
    width: 900, 
    height: 500, 
    series: { 
    1: { 
     targetAxisIndex: 1 
    } 
    }, 
    vAxes: { 
    0: { 
     title: 'Height (cm)' 
    }, 
    1: { 
    title: 'Weight (kg)' 
    } 
    }, 
    theme: 'material' 
}; 

..

In the Mate rial code ...と指定すると、axesとseriesオプションが一緒にチャートのdual-Yの外観を指定します。 seriesオプションは、それぞれに使用する軸を指定します。 axesオプションを使用すると、このチャートはデュアルYチャートになります。

クラシックコードでは、これは少し異なります。 axesオプションではなく、vAxesオプション（または水平方向のチャートでhAxes）を使用します。また、名前を使用する代わりに、インデックス番号を使用して、targetAxisIndexオプションを使用して軸とシリーズを調整します。

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Date'); 
 
    data.addColumn('number', 'Height'); 
 
    data.addColumn('number', 'Weight') 
 
    data.addRows([ 
 
    ['2016-07-27',51,3.4], 
 
    ['2016-08-03',52,4], 
 
    ['2016-08-10',53,5], 
 
    ['2016-08-17',54,6], 
 
    ['2016-08-24',55,7], 
 
    ['2016-08-31',56,8] 
 
    ]); 
 

 
    var optionsMatl = { 
 
     title: 'Height-Weight graph', 
 
     width: 900, 
 
     height: 500, 
 
     series: { 
 
     0: {axis: 'Height'}, 
 
     1: {axis: 'Weight'} 
 
     }, 
 
     axes: { 
 
     y: { 
 
      Height: {label: 'Height (cm)'}, 
 
      Weight: {label: 'Weight (kg)'} 
 
     } 
 
     } 
 
    }; 
 

 
    var chartMatl = new google.charts.Line(document.getElementById('chart_div_matl')); 
 
    chartMatl.draw(data, google.charts.Line.convertOptions(optionsMatl)); 
 

 
    var optionsCore = { 
 
     title: 'Height-Weight graph', 
 
     width: 900, 
 
     height: 500, 
 
     legend: { 
 
     position: 'top', 
 
     alignment: 'end' 
 
     }, 
 
     series: { 
 
     1: { 
 
      targetAxisIndex: 1 
 
     } 
 
     }, 
 
     vAxes: { 
 
     0: { 
 
      title: 'Height (cm)', 
 
     }, 
 
     1: { 
 
     title: 'Weight (kg)' 
 
     } 
 
     }, 
 
     theme: 'material' 
 
    }; 
 

 
    var chartCore = new google.visualization.LineChart(document.getElementById('chart_div_core')); 
 
    chartCore.draw(data, optionsCore); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>Material Chart</div> 
 
<div id="chart_div_matl"></div> 
 
<div>Core Chart</div> 
 
<div id="chart_div_core"></div>