php - Google折线图双Y轴问题

我正在研究一个双y轴线图，它在y轴上既有高度又有重量，在x轴上显示日期：
我从MYSQL数据库中提取数据并将其编码为json，然后将其传递给绘制图表的函数，如图所示：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load('visualization', '1.0', {'packages':['corechart']});

    google.setOnLoadCallback(drawChart);

    function drawChart()
    {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Height');
        data.addColumn('number', 'Weight');
        data.addRows([
        <?php
        $chart_info = $db->prepare("SELECT `height`, `weight`, `date_captured` FROM `child_results_capture` ");
        $chart_info->execute();
        $result = $chart_info->fetchAll(PDO::FETCH_ASSOC);

        $chart_data = '';

        foreach($result as $value)
        {
            $chart_data.="['".$value['date_captured']."',".$value['height'].",".$value['weight']."],";
            // var_dump($chart_data);exit;
            // echo $chart_data;
        }
        echo $chart_data;
        ?>
        ]);

        var options = {

          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 chart = new google.visualization.LineChart(document.getElementById('graph_chart'));
        chart.draw(data, options);
    }
    </script>
    <div id="graph_chart"></div>

从php位返回的Json如下所示：

['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],

我的输出如下：

如上所示，我只得到一个y轴（高度），而我的图表轴没有标注相应的名称。
会很高兴被指向正确的方向

最佳答案

问题中用于构建双Y图表的特定配置选项
仅适用于材料图表-->google.charts.Line

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图需要一组不同的选项
在经典图表中-->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'
};

从Dual-Y Charts的文档中。。。
在“材质代码…”中，“轴”和“系列”选项一起指定图表的双Y外观。系列选项指定每个轴使用哪一个。然后，axes选项使此图表成为双Y图表。
在经典代码中，这略有不同。您将使用vAxes选项（或水平方向图表上的hAxes），而不是axes选项。此外，您可以使用索引号来使用GraceAxISindex选项来协调与轴的系列。
请参阅下面的工作片段，它同时绘制了。。。

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>