javascript - 我们可以在组合图表中创建曲线吗?

标签 javascript php mysql google-visualization

我使用谷歌图表 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>

最佳答案

只需添加选项就可以了...

curveType: '函数'

请参阅以下工作片段没有曲线...

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>


请参阅以下工作片段曲线...

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>

关于javascript - 我们可以在组合图表中创建曲线吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44083463/

相关文章:

javascript - 合并 2 个 Meteor JS 元素

javascript - jQuery 类更改

javascript - 如何通过浏览器中立方法检查 Web 应用程序 list 是否存在?

php - mysql_connect() 总是拒绝访问

mysql - 如何在 MySQL 中返回数据透视表输出?

mysql - 如何使用 SQL 查询在表中的两个字段之间进行减法

php - MYSQL用php移动信息

javascript - jQuery 将事件类添加到第三个动态创建的 div

php - 有没有办法使用php获取mysql查询结果

php - 乘法运算符会导致SQL注入(inject)吗?