我们可以在组合图表中创建曲线吗？答案

【问题标题】：can we create curved lines in combo charts?我们可以在组合图表中创建曲线吗？
【发布时间】：2017-05-20 08:08:48
【问题描述】：

我使用谷歌图表 API 创建了一个组合图表。此组合图是散点图和折线图的组合。我默认创建了它 line 。我需要使用 (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>

【问题讨论】：

标签： javascript php mysql google-visualization

【解决方案1】：

只需添加选项即可...

curveType: 'function'

请参阅以下工作 sn-p 无曲线...

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>

请参阅以下工作 sn-p 与曲线...

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>

【讨论】：