谷歌折线图双Y轴问题

Posted

技术标签:

【中文标题】谷歌折线图双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 认为您指的是传说-您可以使用positionalignment选项...?见上面的编辑... 'legend' 是我一直在寻找的词 :)。我使用“maxLines”选项对图例上的重叠问题进行了排序

以上是关于谷歌折线图双Y轴问题的主要内容,如果未能解决你的问题,请参考以下文章

我无法使用 mysql 表中的数据创建谷歌折线图

谷歌折线图显示负值

从 MYSQL 数据创建谷歌折线图

用单值显示谷歌折线图

多线谷歌折线图,使用来自 mySQL db 的数据

使用 JSON 绘制具有多条线的单个 Google 折线图