谷歌折线图双Y轴问题

Posted 2023-02-24

【中文标题】谷歌折线图双Y轴问题

【英文标题】：Google line chart dual Y-axis issue

【发布时间】：2017-01-13 22:20:01

【问题描述】：

我正在制作一个双 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 轴（高度），我的图表轴没有标注相应的名称

希望被指出正确的方向

【参考方案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 图表 在经典图表中 --> 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 外观。 series 选项指定每个轴使用哪个轴。然后，轴选项使此图表成为双 Y 图表。

在经典代码中，这略有不同。您将使用 vAxes 选项（或水平方向图表上的 hAxes），而不是轴选项。此外，您将不使用名称，而是使用索引号来使用 targetAxisIndex 选项将系列与轴协调。

请参阅下面的工作 sn-p，它同时绘制...

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>

【讨论】：

希望对您有所帮助，个人建议使用 Classic 图表 (google.visualization.LineChart) --> 列角色以及许多配置选项根本不适用于 材料图表 (google.charts.Line)

优秀。一周内第二次你来救我了！谢谢。并同意经典图表更好。我最近才开始使用谷歌图表，但我现在正在赶上。最后一个问题，图表显示得很好，但是（不确定如何称呼它们）在顶部（图表标题下方）显示身高和体重的“指标”似乎相互重叠，即相互重叠。知道为什么吗？

应该提到这是我的责任。你的显示很好

i 认为您指的是传说-您可以使用position和alignment选项...？见上面的编辑...

'legend' 是我一直在寻找的词 :)。我使用“maxLines”选项对图例上的重叠问题进行了排序