我使用谷歌图表API创建了一个组合图表。此组合图表是散点图和折线图的组合。我是按默认行创建的。我需要使用(curveType:' function')使其弯曲。但我不知道如何在组合图中使用它。是否有可能在组合图中获得曲线? 这是我的图表代码:
<html>
<head>
<title>Google Charts </title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
<?php
$sql = mysql_connect("localhost","root","");
if(!$sql)
{
echo "Connection Not Created";
}
$con = mysql_select_db("PRJ");
if(!$sql)
{
echo "Database Not Connected";
}
$sql = "select * from CF";
$result = mysql_query($sql);
$count=0;
while($row = mysql_fetch_array($result))
{
$a[]=$row['x'];
$b[]=$row['y'];
$count++;
}
$tot=0;
$toty=0;
$xsqtot=0;
$ysqtot=0;
$xytot=0;
for($i=0;$i<$count;$i++)
{
$tot=$tot+$a[$i];
$toty=$toty+$b[$i];
$xpow[]=$a[$i]*$a[$i];
$ypow[]=$b[$i]*$b[$i];
$xsqtot=$xsqtot+$xpow[$i];
$ysqtot=$ysqtot+$ypow[$i];
$product[]=$a[$i]*$b[$i];
$xytot=$xytot+$product[$i];
}
$p=(($tot*$toty)-($count*$xytot))/(($tot*$tot)-($count*$xsqtot));
$q=(($xytot*$tot)-($xsqtot*$toty))/(($tot*$tot)-($count*$xsqtot));
for($i=0;$i<$count;$i++)
{
$cfy[]=($p*$a[$i])+$q;
}
?>
var x=new Array();
<?php
for($i=0;$i<$count;$i++){
echo "x[$i]=".$a[$i].";\n";}
?>
var y=new Array();
<?php
for($i=0;$i<$count;$i++){
echo "y[$i]=".$b[$i].";\n";}
?>
var z=new Array();
<?php
for($i=0;$i<$count;$i++){
echo "z[$i]=".$cfy[$i].";\n";}
?>
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('number', 'independent');
data.addColumn('number', 'dependent');
data.addColumn('number', 'TRENDLINE');
for(var i=0;i<x.length;i++)
{
data.addRows([[x[i],y[i],z[i]]]);
}
var options = {'title':'LAT VS LONG ',
vAxis: {title: 'X'},
hAxis: {title: 'Y'},
'width':550,
'height':400,
seriesType:'scatter',
series: {1: {type: 'line'}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
答案 0 :(得分:1)
只需添加选项即可...
curveType: 'function'
请参阅以下工作代码段不带曲线...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'without curve',
vAxis: {
title: 'X'
},
hAxis: {
title: 'Y'
},
width: 550,
height: 400,
seriesType: 'scatter',
series: {
1: {
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
请参阅以下工作代码段 with 曲线...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'with curve',
curveType: 'function',
vAxis: {
title: 'X'
},
hAxis: {
title: 'Y'
},
width: 550,
height: 400,
seriesType: 'scatter',
series: {
1: {
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>