我有下表,我用PHP和JavaScript创建了一个包含Google Charts(https://www.google.com/jsapi)的图表:
表格:
图:
图形的代码如下:
<?php $result_chart = sqlsrv_query($con1, $sSQL ); /*Get the data from database*/
$rows = array();
$table = array();
$table ['cols'] = array(
array ('label' => 'L [µH]', 'type' => 'number'),
array ('label' => 'I rated max', 'type' => 'number'),
array ('label' => 'Rdc max', 'type' => 'number')
);
while($r = sqlsrv_fetch_array($result_chart)){
$temp = array();
$temp[] = array('v' => (double) $r['L_value']);
$temp[] = array('v' => (double) $r['Irms']);
$temp[] = array('v' => (double) $r['Rdc']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table); ?>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'I/R-L chart',
hAxis: {title: 'L value [nH]', titleTextStyle: {color: 'black'}, logScale: true },
vAxes: { 0: {title: 'I value [A]', logScale: false}, 1: {title: 'Rdc value [Ohms]', logScale: false}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1}
},
pointSize:4,
lineWidth: 0
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
我想在表格的行中添加一个onClick事件,这样当您单击一个时,在图形中会显示一条垂直线(该行的对应L值中的垂直线)。 这里是小提琴,有一个表格示例(不是所有值)和该表格的图形http://jsfiddle.net/W2JWa/11/ 有人能帮助我吗?