谷歌折线图双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 认为您指的是传说-您可以使用position
和alignment
选项...?见上面的编辑...
'legend' 是我一直在寻找的词 :)。我使用“maxLines”选项对图例上的重叠问题进行了排序以上是关于谷歌折线图双Y轴问题的主要内容,如果未能解决你的问题,请参考以下文章