将JSON编码的PHP变量传递给HighCharts

我试图从PHP变量插入JSON编码的MySQL结果集到Highcharts脚本中。将JSON编码的PHP变量传递给HighCharts

我已经成功地将一个MySQL结果列表从一个PHP变量插入到另一个实例中的Highcharts，通过Group格式化为Highchart可接受的数据在SQL Select语句中连接逗号和撇号（这是一种肮脏但有效的方式它）。我现在的目标是让我的图表在工具提示中显示元数据，我无法工作，但我认为我与我的工作很接近。

这里是PHP脚本来检索从MySQL数据库和JSON数据进行编码：

$mysqli = new mysqli('localhost','username','password','database'); 

$myArray = array(); 

if ($result = $mysqli->query(" 
SELECT 
time_minutes.minutes*60+time_seconds.seconds AS y, 
run_date.id AS ID, 
run_date.date AS RunDate, 
run_temp.temperature AS Temperature, 
run_conditions.weather AS Conditions, 
run_hydration.hydration_level AS Hydration 
FROM run_conditions, run_date, run_hydration, run_notes, run_temp, time_minutes, time_seconds 
WHERE run_date.id = run_conditions.id 
AND run_date.id = run_hydration.id 
AND run_date.id = run_notes.id 
AND run_date.id = run_temp.id 
AND run_date.id = time_minutes.id 
AND run_date.id = time_seconds.id 
")) { 

    while($row = $result->fetch_array(MYSQL_ASSOC)) { 
      $myArray[] = $row; 
    } 
} 

$raw_json = json_encode($myArray); 

$json_without_quotes = str_replace('"', "", $raw_json); 

$result->close(); 
$mysqli->close(); 
?>

y值是什么，我打算酒吧高度是;其余的是元数据（温度，条件等），我想在工具提示中出现。

的raw_json输出看起来是这样的：

[{"y":"1500.00", 
"ID":"1", 
"RunDate":"2015-10-19", 
"Temperature":"87", 
"Conditions":"Humid and hot", 
"Hydration":"8"}, 
{"y":"1474.48", 
"ID":"2", 
"RunDate":"2015-10-21", 
"Temperature":"80", 
"Conditions":"Light rain", 
"Hydration":"9"}, 
{"y":"1442.01", 
"ID":"3", 
"RunDate":"2015-10-22", 
"Temperature":"82", 
"Conditions":"Sunny", 
"Hydration":"4"}]

的json_without_quotes输出看起来是这样的：

[{y:1500.00, 
ID:1, 
RunDate:2015-10-19, 
Temperature:87, 
Conditions:Humid and hot, 
Hydration:8}, 
{y:1474.48, 
ID:2, 
RunDate:2015-10-21, 
Temperature:80, 
Conditions:Light rain, 
Hydration:9}, 
{y:1442.01, 
ID:3, 
RunDate:2015-10-22, 
Temperature:82, 
Conditions:Sunny, 
Hydration:4}]

下面是基础Highcharts，我正在试图重塑脚本（这是功能性的）使用我自己的数据（发现在this JSfiddle）。

<script> 
$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chartchartchart', 
      type: 'column' 
     }, 
     xAxis: { 
      categories: [(a dymanically-generated list of dates)] 
     }, 
     series: [{ 
      data: [{

这是我插入json_without_quotes变量的地方;下面的数据格式正确，但我注意到它只包含整数; 必须改变一些东西来使这个接受字符串作为参数，但我不知道必须改变什么。

   y: 3, 
       locked: 1, 
       unlocked: 1, 
       potential: 1, 
      }, { 
       y: 5, 
       locked: 2, 
       unlocked: 1, 
       potential: 3, 
      }, { 
       y: 7, 
       locked: 3, 
       unlocked: 1, 
       potential: 3, 
      }] 
     }], 
     tooltip: { 
      formatter: function() {return ' ' + 
       'Locked: ' + this.point.locked + '<br />' + 
       'Unlocked: ' + this.point.unlocked + '<br />' + 
       'Potential: ' + this.point.potential; 
      } 
     } 
    }); 
}); 
</script> 
<div id="chartchartchart" style="height: 400px"></div>

在此先感谢您的帮助！

来源

2016-04-21 Samuel Campbell

任何你想要的工具提示中显示可以设置为字符串，因为它会以字符串形式显示。你不需要从你的json数据中删除引号。 [Here]（http://jsfiddle.net/xepyc424/1/）是更新的小提琴，看看。 –

谢谢你的帮助;这告诉我很多，但是，“y：”值必须不带引号产生。我会尽量让这发生cap'n。将根据结果更新帖子。 –

成功取代[(a dymanically-generated list of dates)]：可能不是最佳实践方式做到这一点，但我做到了。

行情不能单方面适用。我使用str_replace方法从JSON输出中去除双引号字符，并使用CONCAT SQL函数将单引号字符添加到字符串中，我想要它们。

例如，保留为2015-11-15而非“2015-11-15”的日期被解释为2015减去11减去15，因此日期必须用引号引起来。另一方面，如果是周围的引号，则“y：”值不会被解析为条的大小。所以引用必须单独应用。 MySQL连接是做IMO的最简单的方法。

PHP：

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
</head> 
<body> 
<?php 

// Open database connection 
$mysqli = new mysqli('localhost','username','password','database'); 

// Get the Date List and format it for the Highchart x-axis labels 
$datequery = " 
SELECT GROUP_CONCAT(\"'\", run_date.date, \"'\") 
FROM run_date 
ORDER BY id 
"; 

$dateresult = $mysqli->query($datequery); 

$daterow = $dateresult->fetch_array(MYSQLI_NUM); 

print "<pre>"; 
print_r($daterow); 
print "</pre>"; 

$date_list = $daterow[0]; 
// End of Date List part 

// Start of Chart Data to generate bars 
$myArray = array(); 

if ($result = $mysqli->query(" 
SELECT 
time_minutes.minutes*60+time_seconds.seconds AS y, 
run_date.id AS ID, 
CONCAT(\"'\", time_minutes.minutes, ':', time_seconds.seconds, \"'\") AS RunTime, 
run_temp.temperature AS Temperature, 
run_hydration.hydration_level AS Hydration, 
CONCAT(\"'\", run_notes.note, \"'\") AS Notes, 
CONCAT(\"'\", run_date.date, \"'\") AS RunDate 
FROM run_conditions, run_date, run_hydration, run_notes, run_temp, time_minutes, time_seconds 
WHERE run_date.id = run_conditions.id 
AND run_date.id = run_hydration.id 
AND run_date.id = run_notes.id 
AND run_date.id = run_temp.id 
AND run_date.id = time_minutes.id 
AND run_date.id = time_seconds.id 
")) { 

    while($row = $result->fetch_array(MYSQL_ASSOC)) { 
      $myArray[] = $row; 
    } 
} 

// End of Bar Chart Part 

// Beginning of producing JSON object 

$raw_json = json_encode($myArray); // Put the MySQL results into JSON format 

$json_without_quotes = str_replace('"', "", $raw_json); // Strip the double-quotes out of the JSON; the SQL concatenates single quotes where they are needed. 

// Print the quote-stripped JSON to test it 
echo $json_without_quotes; 

// Close the connection, of course 
$result->close(); 
$mysqli->close(); 
?>

JSON输出：

[{ 
y:1500.00, 
ID:1, 
RunTime:'25:0.00', 
Temperature:87, 
Hydration:8, 
Notes:'Sed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci.', 
RunDate:'2015-10-19'}, 
{y:1474.48, 
ID:2, 
RunTime:'24:34.48', 
Temperature:80, 
Hydration:9, 
Notes:'Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis.', 
RunDate:'2015-10-21'}, 
{y:1442.01, 
ID:3, 
RunTime:'24:2.01', 
Temperature:82, 
Hydration:4, 
Notes:'Duis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.', 
RunDate:'2015-10-22'}]

Highcharts脚本：

<script> 
$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chartdiv', 
      type: 'column' 
     }, 
     xAxis: { 
      categories: [<?=$date_list?>] 
     }, 
     series: [{ 
      data: <?=$json_without_quotes?> 
     }], 
     tooltip: { 
      formatter: function() {return ' ' + 
       'ID: ' + this.point.ID + '<br />' + 
       'Run Date: ' + this.point.RunDate + '<br />' + 
       'Temperature: ' + this.point.Temperature + '<br />' + 
       'Hydration: ' + this.point.Hydration + '<br />' + 
       'Notes: ' + this.point.Notes; 
      } 
     } 
    }); 
}); 
</script> 
<div id="chartdiv" style="height: 1000px"></div> 
</body> 
</html>

来源

2016-04-22 00:48:45

还有另一种方法可能会更容易。让你的代码像问题一样，以便json输出全部用引号引起来。然后，在将其设置为highcharts系列数据之前，只需遍历一次，然后将“y”值解析为数字。属性名称y仍然可以用引号引起来，它会起作用。 –

您需要将您的输出转换为Javascript对象，否则javascript会将其视为string并将其读取为"['Main Item', 'Second Item', 'Third Item']"而不是对象。您可以使用javascript中的JSON.Parse()函数来执行此操作。

尝试用类似JSON.Parse("<?php echo $raw_json; ?>");

来源

2016-04-21 22:31:40 kjellberg

他在问题中添加的raw_json的值看起来不像我的字符串，看起来像一个JavaScript对象。 –

如果你在PHP中使用混合HTML回显json对象 - 除非你改变头MIME类型，或者只输出json数据，比如当你做ajax请求时，它将以字符串形式输出。在你的例子中['Main Item '，'Second Item'，'Third Item']如果它是由PHP输出的话，就像“['Main Item'，'Second Item'，'Third Item']”一样。所以你必须使用JSON.Parse（）将它转换为一个对象。您可以使用console.log（）来确认。 – kjellberg

将JSON编码的PHP变量传递给HighCharts

回答

相关问题