Php 谷歌折线图双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>

我的输出如下所示：

['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'
};

从文档中

在“材质代码…”中，轴和系列选项一起指定图表的双Y外观。“系列”选项指定每个轴使用哪个轴。然后，“轴”选项使该图表成为双Y图表

在经典代码中，这略有不同。您将使用VAX选项（或水平方向图表上的HAX），而不是轴选项。此外，您将使用targetAxisIndex选项使用索引号将序列与轴进行坐标，而不是使用名称

请参阅下面的工作代码段，它同时绘制了

google.charts.load（'current'，{packages:['corechart'，'line']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Date'）；
data.addColumn（'number'，'Height'）；
data.addColumn（'数字'，'重量'）
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 OptionMatl={
标题：“身高体重图”，
宽度：900，
身高：500，
系列：{
0:{轴：“高度”}，
1:{轴：'权重'}
},
轴线：{
y:{
高度：{标签：'高度（厘米）}，
重量：{标签：'重量（kg）}
}
}
};
var chartMatl=new google.charts.Line（document.getElementById（'chart\u div\u matl'）；
chartmatal.draw（数据，google.charts.Line.convertOptions（optionMatl））；
var optionsCore={
标题：“身高体重图”，
宽度：900，
身高：500，
图例：{
位置：'顶部'，
对齐：“结束”
},
系列：{
1: {
目标指数：1
}
},
阀门：{
0: {
标题：“高度（厘米）”，
},
1: {
标题：重量（kg）
}
},
主题：“材料”
};
var chartCore=new google.visualization.LineChart（document.getElementById（'chart\u div\u core'）；
chartCore.draw（数据、选项Core）；
}

材料表
核心图

希望这有帮助，个人建议使用经典图表（

google.visualization.LineChart

）-->columns角色以及许多配置选项在材质图表上根本不起作用（

google.charts.Line

）非常好。一周内你第二次来救我！谢谢你。并同意经典图表更好。我最近才开始使用谷歌图表，但现在我正在迎头赶上。最后一个问题，图表显示得很好，但在顶部（图表标题下方）显示身高和体重的“指标”（不确定如何称呼它们）似乎相互重叠，即写在彼此的顶部。知道为什么吗？我应该提一下这是我的责任。您的显示良好我想您指的是图例--您可以使用

位置

和

对齐

选项。。。？请参见上面的编辑…“图例”是我要找的单词：）。我使用“maxLines”选项对图例上的重叠问题进行排序