Question

我正在使用HighCharts。

 $(function ()
   {
       var chart;

       $(document).ready(function ()
       {
           $.getJSON("json/PowerCurve.php", function (json)
           {

               chart = new Highcharts.Chart({
                   chart: {
                       renderTo: 'container',
                       zoomType: 'xy'
                   },
                   title: {
                       text: 'Power Curve'
                   },
                   subtitle: {
                       text: 'Source: .wsd SCADA File'
                   },
                   xAxis: {
                       title: {
                           enabled: true,
                           text: 'wind speed [m/s]'
                       },
                       startOnTick: true,
                       endOnTick: true,
                       showLastLabel: true,
                       min: 0
                   },
                   yAxis: {
                       title: { text: 'Power [kW]' },
                       min: 0
                   },
                   legend: {
                       layout: 'vertical',
                       align: 'left',
                       verticalAlign: 'top',
                       x: 100,
                       y: 70,
                       floating: true,
                       backgroundColor: '#FFFFFF',
                       borderWidth: 1
                   },
                   plotOptions: {
                       scatter: {
                           marker: {
                               radius: 1,
                               states: {
                                   hover: {
                                       enabled: false,
                                       lineColor: 'rgb(100,100,100)'
                                   }
                               }
                           },
                           states: {
                               hover: {
                                   marker: {
                                       enabled: false
                                   }
                               }
                           },
                           tooltip: {
                               headerFormat: '<b>{series.name}</b><br>',
                               pointFormat: '{point.x} m/s, {point.y} kW'
                           }
                       }
                   },
                   series: [{
                       type: 'scatter',
                       name: 'WEC Power Curve',
                       color: 'rgba(46, 138, 138,  1)',
                       data: json[0]
                   }, {

                       type: 'line',
                       lineWidth: 1,
                       dashStyle: 'solid',
                       name: 'Power Curve',
                       color: 'rgba(195, 59, 69,  1)',
                       data: json[1]
                   }],
                   credits: { enabled: false }
               });

这是我的php文件：

<?php
$con = mysql_connect("localhost","r","admin");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("scada", $con);

    $query1 = mysql_query("SELECT avgwind, avgpower FROM tblwsd ORDER BY avgwind, avgpower ASC;");

    $query2 = mysql_query("SELECT wind, `E-82` FROM tblpowercurve ORDER BY wind, `E-82` ASC;");

$serie1 = array();
$serie2 = array();

while($r = mysql_fetch_array($query1)) {
    $avgwind = $r['avgwind'];
    $avgpower = $r['avgpower'];
    $serie1[] = array($avgwind, $avgpower);
}

while($r = mysql_fetch_array($query2)) {
    $avgwind = $r['wind'];
    $avgpower = $r['E-82'];
    $serie2[] = array($avgwind, $avgpower);
}


$result = array();
array_push($result,$category);

echo json_encode(array($serie1, $serie2), JSON_NUMERIC_CHECK);

mysql_close($con);

?>

这是按预期工作的。我想调用json文件，并在查询中使用一些用户输入。我怎么能这样做？

像：

$。getJSON（“json / PowerCurve.php？USERINPUT？USERINPUT”，function（json）

Answer 1

$.getJSON("json/PowerCurve.php?start=value&end=value", function (json))

使用它，您可以将PowerCurve.php脚本中的值设为$ _GET ['start']和$ _GET ['end']。您可以使用它们根据日期范围查询数据。获取结果并将其作为json返回到图表中。你所做的只是缩小json文件的结果，其他任何东西都不需要改变。

具有用户输入的Highcharts JSON

1 个答案: