php - 谷歌折线图双 Y 轴问题

Question

我正在制作一个双 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轴(高度)并且我的图表轴没有标有相应的名称

很高兴被指出正确的方向

Answer 1

问题中用于构建双 Y 图表
的特定配置选项仅适用于 Material 图表 --> 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 图表
在 Classic 图表中 --> 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 的文档...

In the Material code ..., the axes and series options together specify the dual-Y appearance of the chart. The series option specifies which axis to use for each. The axes option then makes this chart a dual-Y chart.

In the Classic code, this differs slightly. Rather than the axes option, you will use the vAxes option (or hAxes on horizontally oriented charts). Also, instead of using names, you will use the index numbers to coordinate a series with an axis using the targetAxisIndex option.

请参阅以下工作代码段，其中绘制了...

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>