用谷歌图表绘制垂直线

时间:2015-08-13 12:39:19

标签: javascript php jquery google-visualization

我有下表,我用PHP和JavaScript创建了一个包含Google Charts(https://www.google.com/jsapi)的图表:

表格:

enter image description here

图:

enter image description here

图形的代码如下:

<?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/ 有人能帮助我吗?

0 个答案:

没有答案