两个阵列的Google散点图

时间:2012-09-17 14:27:41

标签: php javascript jquery html google-visualization

Hello People这里是我使用的谷歌分散图表代码:

require '/lib/GoogleChart.php';
require '/lib/markers/GoogleChartShapeMarker.php';
require '/lib/markers/GoogleChartTextMarker.php';

$Variance=array();
$Emp_RecFactor=array();
$Emp_Id=array();

//$Emp_FirstName=array();
$EquityGraph=new EquityGraph();
$EquityGraph->Graph();
$DrawGraph=$EquityGraph->DrawGraph;

foreach($DrawGraph as $key=>$value)
{
    $Variance[]=$value["Variance"];//for multiple values ,array
    $Emp_RecFactor[]=$value["Emp_RecFactor"];//single value
    $Emp_Id[]=$value["Emp_Id"];//single value
}

$_GET['Variance']=$Variance;
$_GET['Emp_RecFactor']=$Emp_RecFactor;

print_r($Emp_RecFactor);

$chart = new GoogleChart('lc', 500, 200);

// manually forcing the scale to [0,100]
$chart->setScale(0,100);

// add one line
$data = new GoogleChartData($Variance);
$chart->addData($data);

// customize y axis
$y_axis = new GoogleChartAxis('y');
$y_axis->setDrawTickMarks(false)->setLabels(array(-5,0,5));
$chart->addAxis($y_axis);

// customize x axis
$x_axis = new GoogleChartAxis('x');
$x_axis->setTickMarks(5);
$chart->addAxis($x_axis);

// add a shape marker with a border
$shape_marker = new GoogleChartShapeMarker(GoogleChartShapeMarker::CIRCLE);
$shape_marker->setSize(6);
$shape_marker->setBorder(2);
$shape_marker->setData($data);
$chart->addMarker($shape_marker);

// add a value marker
$value_marker = new GoogleChartTextMarker(GoogleChartTextMarker::VALUE);
$value_marker->setData($data);
$chart->addMarker($value_marker);

//~ header('Content-Type: image/png');
echo $chart->toHtml();

正如您在代码中看到的,我使用$Variance数组传递给$data现在我需要再使用一个数组$Emp_RecFactor,我需要在这两个数组之间绘制一个图表。 ..

我还想在此功能上添加鼠标功能,这样如果有人将鼠标悬停在选定的点上,它应该为不同的选定点显示不同的内容 - 我是如何做到的?

1 个答案:

答案 0 :(得分:2)

要在两个阵列之间绘制Google分散图表,您必须使用以下代码

 var data = google.visualization.arrayToDataTable([
    ['Age', 'Array1', 'Array2'],
    [8, 12, 15],
    [4, 5.5, 0],
    [11, 0, 14],
    [4, 9, 5],
    [3, 3.5, 9],
    [6.5, 7, 13]
]);

它有一个默认工具提示,用于在悬停选定点时显示数据。我们还可以使用html标签自定义Tooltip内容。 要查看工作样本,请转到网站jqfaq.com(示例)并自定义工具提示内容,转到网站jqfaq.com(自定义工具提示)