通过Highcharts从MySQL获得JSON编码数据的麻烦
[英]Having trouble JSON encoded data from MySQL through Highcharts
问题描述
I have been trying to parse my data from my php file to reflect the data in the array using this area graph example found here . 
我一直试图从我的php文件中解析我的数据，以使用此处的区域图示例反映数组中的数据。 Before, I had all the data commented out to going to the array, but now I am just trying to display one part of data. 在此之前，我已将所有数据注释掉以进入数组，但现在我只是想显示一部分数据。 I don't know if it has to do with the data being parsed or I am not calling the data correctly into the HTML file. 我不知道它是否与被解析的数据有关，或者我没有正确地将数据调用到HTML文件中。 The variable 'js_array' was not there before, but I thought it could be a solution to my problem, but unfortunately it still comes out with a blank page. 变量'js_array'以前不存在，但我认为它可以解决我的问题，但不幸的是它仍然是一个空白页面。
PHP code: PHP代码：
<?php
// A simple PHP script demonstrating how to connect to MySQL.
// Press the 'Run' button on the top to start the web server,
// then click the URL that is emitted to the Output tab of the console.
$servername = getenv('IP');
$username = getenv('C9_USER');
$password = "";
$database = "reports2";
$dbport = 3306;
// Create connection
$db = new mysqli($servername, $username, $password, $database, $dbport);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
echo "Connected successfully (".$db->host_info.")";
$query = "SELECT wTCP_UP1
FROM 1_sp12_la UNION ALL SELECT wTCP_UP1 FROM 1_sp12_rs UNION SELECT wTCP_UP1 FROM 1_sp12_sf";
//1_sp12_la._Provider, 1_sp12_la.NORMALIZED_LAT, 1_sp12_la.NORMALIZED_LONG, 1_sp12_la.wTCP_UP1, 1_sp12_la._wTCP_DOWN2
// 1_sp12_rs._Provider, 1_sp12_rs.NORMALIZED_LONG, 1_sp12_rs.NORMALIZED_LAT, 1_sp12_rs.wTCP_UP1, 1_sp12_rs._wTCP_DOWN2
$result = mysqli_query($db, $query);
$data = array();
//$stmt->execute();
while ($row = mysqli_fetch_assoc($result))
{
$data[] = $row;
// echo " ID: " . $row["att_fall2012_id"] . ", Normalized Latitude: " . $row["NORMALIZED_LAT"] .
//", Location ID: " . $row["_Location_ID"] . ", Provider: " . $row["_Provider"] . ", TCP Upload Speed:"
//. $row["wTCP_UP1"] . ", TCP Download Speed:" . $row["_wTCP_DOWN1"] .nl2br ("\n") ;
//echo nl2br("\n");
}
echo json_encode($data, JSON_NUMERIC_CHECK);
//$json_data = json_encode($data);
//file_put_contents('CityData/attfall2012.json', $json_data);
?>
and here my HTML file where the graph is supposed to be. 在这里我的HTML文件应该是图形。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Area Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
<script type = "text/javascript">
js_array = new Array( <?php echo implode(',' , $data); ?>);
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b> <br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
data: js_array
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I have searched all over the place, but nothing. 我到处搜遍了，但没有。 I am also not the greatest with javascript and very new to Highcharts. 我也不是最好的JavaScript和非常新的Highcharts。 Thanks! 谢谢！ Please let me know if you need more info. 如果您需要更多信息，请告诉我。
Edit: Here is the JSON output: 编辑：这是JSON输出：
[{"wTCP_UP1":6163},{"wTCP_UP1":13622},{"wTCP_UP1":456.1},{"wTCP_UP1":2142.3},{"wTCP_UP1":6317},{"wTCP_UP1":1710},{"wTCP_UP1":7966},{"wTCP_UP1":2680},{"wTCP_UP1":1157},{"wTCP_UP1":1202},{"wTCP_UP1":690},{"wTCP_UP1":3330},{"wTCP_UP1":1215},{"wTCP_UP1":2872},{"wTCP_UP1":1192},{"wTCP_UP1":474.1},{"wTCP_UP1":2855},{"wTCP_UP1":1185},{"wTCP_UP1":1184},{"wTCP_UP1":1214},{"wTCP_UP1":727},{"wTCP_UP1":1902.5},{"wTCP_UP1":1190},{"wTCP_UP1":1639.5},{"wTCP_UP1":1286},{"wTCP_UP1":1182},{"wTCP_UP1":800},{"wTCP_UP1":1191},{"wTCP_UP1":290.1},{"wTCP_UP1":1155},{"wTCP_UP1":1209},{"wTCP_UP1":857},{"wTCP_UP1":376.4},{"wTCP_UP1":1033},{"wTCP_UP1":589},{"wTCP_UP1":394},{"wTCP_UP1":1441},{"wTCP_UP1":1723},{"wTCP_UP1":1204},{"wTCP_UP1":1212},{"wTCP_UP1":1659},{"wTCP_UP1":731},{"wTCP_UP1":568},{"wTCP_UP1":1163},{"wTCP_UP1":588},{"wTCP_UP1":0},{"wTCP_UP1":1469},{"wTCP_UP1":807.9},{"wTCP_UP1":1222},{"wTCP_UP1":773},{"wTCP_UP1":1181},{"wTCP_UP1":1169},{"wTCP_UP1":1106},{"wTCP_UP1":553},{"wTCP_UP1":392.7},{"wTCP_UP1":1022},{"wTCP_UP1":792},{"wTCP_UP1":1036},{"wTCP_UP1":1250},{"wTCP_UP1":711.7},{"wTCP_UP1":1162},{"wTCP_UP1":1074},{"wTCP_UP1":419},{"wTCP_UP1":806},{"wTCP_UP1":428},{"wTCP_UP1":957},{"wTCP_UP1":1150},{"wTCP_UP1":987},{"wTCP_UP1":846},{"wTCP_UP1":998},{"wTCP_UP1":705},{"wTCP_UP1":221.8},{"wTCP_UP1":1097},{"wTCP_UP1":344},{"wTCP_UP1":856},{"wTCP_UP1":383.1},{"wTCP_UP1":171.9},{"wTCP_UP1":446.9},{"wTCP_UP1":3147},{"wTCP_UP1":719},{"wTCP_UP1":1119},{"wTCP_UP1":441.5},{"wTCP_UP1":1740},{"wTCP_UP1":1027},{"wTCP_UP1":53.8},{"wTCP_UP1":1072},{"wTCP_UP1":1193},{"wTCP_UP1":1079},{"wTCP_UP1":1092},{"wTCP_UP1":155.8},{"wTCP_UP1":576},{"wTCP_UP1":1243},{"wTCP_UP1":335.6},{"wTCP_UP1":213},{"wTCP_UP1":180.3},{"wTCP_UP1":256.7},{"wTCP_UP1":1137},{"wTCP_UP1":465},{"wTCP_UP1":223.7},{"wTCP_UP1":1536},{"wTCP_UP1":701},{"wTCP_UP1":622},{"wTCP_UP1":815},{"wTCP_UP1":261},{"wTCP_UP1":31.2},{"wTCP_UP1":597},{"wTCP_UP1":301.4},{"wTCP_UP1":643},{"wTCP_UP1":1133},{"wTCP_UP1":462.2},{"wTCP_UP1":488.7},{"wTCP_UP1":438.7},{"wTCP_UP1":281},{"wTCP_UP1":432.9},{"wTCP_UP1":59.6},{"wTCP_UP1":191},{"wTCP_UP1":479},{"wTCP_UP1":85.8},{"wTCP_UP1":170.3},{"wTCP_UP1":380.7},{"wTCP_UP1":248.7},{"wTCP_UP1":251.3},{"wTCP_UP1":102.4},{"wTCP_UP1":276.8},{"wTCP_UP1":648},{"wTCP_UP1":661},{"wTCP_UP1":341.5},{"wTCP_UP1":240.7},{"wTCP_UP1":511},{"wTCP_UP1":148.1},{"wTCP_UP1":305.4},{"wTCP_UP1":86.4},{"wTCP_UP1":1564.5},{"wTCP_UP1":1276},{"wTCP_UP1":944.55},{"wTCP_UP1":1437.5},{"wTCP_UP1":1510.5},{"wTCP_UP1":1483},{"wTCP_UP1":1031.5},{"wTCP_UP1":1535},{"wTCP_UP1":1317.5},{"wTCP_UP1":1501},{"wTCP_UP1":1614},{"wTCP_UP1":1229},{"wTCP_UP1":1444},{"wTCP_UP1":1196},{"wTCP_UP1":1369.5},{"wTCP_UP1":1166},{"wTCP_UP1":100.7},{"wTCP_UP1":662.6},{"wTCP_UP1":945},{"wTCP_UP1":1135},{"wTCP_UP1":490.2},{"wTCP_UP1":961},{"wTCP_UP1":1042.5},{"wTCP_UP1":400.55},{"wTCP_UP1":935},{"wTCP_UP1":562.05},{"wTCP_UP1":966.5},{"wTCP_UP1":1132},{"wTCP_UP1":674.45},{"wTCP_UP1":755.5},{"wTCP_UP1":946},{"wTCP_UP1":821},{"wTCP_UP1":536.3},{"wTCP_UP1":512.5},{"wTCP_UP1":775.8},{"wTCP_UP1":1026},{"wTCP_UP1":937.5},{"wTCP_UP1":920},{"wTCP_UP1":1015},{"wTCP_UP1":1020},{"wTCP_UP1":433.2},{"wTCP_UP1":1021},{"wTCP_UP1":1211},{"wTCP_UP1":277.1},{"wTCP_UP1":439.85},{"wTCP_UP1":924},{"wTCP_UP1":629},{"wTCP_UP1":912},{"wTCP_UP1":514.35},{"wTCP_UP1":494.45},{"wTCP_UP1":688},{"wTCP_UP1":265.5},{"wTCP_UP1":910},{"wTCP_UP1":809},{"wTCP_UP1":749.35},{"wTCP_UP1":934},{"wTCP_UP1":906},{"wTCP_UP1":917},{"wTCP_UP1":1065},{"wTCP_UP1":762},{"wTCP_UP1":231.8},{"wTCP_UP1":860},{"wTCP_UP1":859},{"wTCP_UP1":997},{"wTCP_UP1":614},{"wTCP_UP1":779.5},{"wTCP_UP1":935.5},{"wTCP_UP1":876.8},{"wTCP_UP1":481.7},{"wTCP_UP1":355.2},{"wTCP_UP1":796},{"wTCP_UP1":343.7},{"wTCP_UP1":793},{"wTCP_UP1":903},{"wTCP_UP1":706},{"wTCP_UP1":854},{"wTCP_UP1":287.6},{"wTCP_UP1":652.7},{"wTCP_UP1":888},{"wTCP_UP1":362.9},{"wTCP_UP1":605},{"wTCP_UP1":874.5},{"wTCP_UP1":403.3},{"wTCP_UP1":868},{"wTCP_UP1":907},{"wTCP_UP1":689},{"wTCP_UP1":712.9},{"wTCP_UP1":428.7},{"wTCP_UP1":94.6},{"wTCP_UP1":676},{"wTCP_UP1":476.5},{"wTCP_UP1":280.15},{"wTCP_UP1":409.05},{"wTCP_UP1":745.5},{"wTCP_UP1":108},{"wTCP_UP1":609},{"wTCP_UP1":776.7},{"wTCP_UP1":941},{"wTCP_UP1":746},{"wTCP_UP1":224.4},{"wTCP_UP1":767},{"wTCP_UP1":582},{"wTCP_UP1":664},{"wTCP_UP1":633},{"wTCP_UP1":520.9},{"wTCP_UP1":715},{"wTCP_UP1":779},{"wTCP_UP1":507.8},{"wTCP_UP1":696},{"wTCP_UP1":255.3},{"wTCP_UP1":477},{"wTCP_UP1":675.5},{"wTCP_UP1":695},{"wTCP_UP1":755},{"wTCP_UP1":670.5},{"wTCP_UP1":512.55},{"wTCP_UP1":447.3},{"wTCP_UP1":551},{"wTCP_UP1":406.6},{"wTCP_UP1":643.7},{"wTCP_UP1":735.8},{"wTCP_UP1":188.9},{"wTCP_UP1":189.8},{"wTCP_UP1":199.7},{"wTCP_UP1":264.5},{"wTCP_UP1":221.1},{"wTCP_UP1":556.15},{"wTCP_UP1":491.1},{"wTCP_UP1":349.2},{"wTCP_UP1":448},{"wTCP_UP1":891},{"wTCP_UP1":224.8},{"wTCP_UP1":714},{"wTCP_UP1":850},{"wTCP_UP1":602},{"wTCP_UP1":206.9},{"wTCP_UP1":226.9},{"wTCP_UP1":424.1},{"wTCP_UP1":1005},{"wTCP_UP1":944},{"wTCP_UP1":247.7},{"wTCP_UP1":99.6},{"wTCP_UP1":93.5},{"wTCP_UP1":2266.5},{"wTCP_UP1":2348},{"wTCP_UP1":2849},{"wTCP_UP1":3093},{"wTCP_UP1":2816},{"wTCP_UP1":1156},{"wTCP_UP1":2015},{"wTCP_UP1":1351},{"wTCP_UP1":3193},{"wTCP_UP1":3066},{"wTCP_UP1":1297.5},{"wTCP_UP1":1417},{"wTCP_UP1":2940},{"wTCP_UP1":2674},{"wTCP_UP1":1542},{"wTCP_UP1":2166},{"wTCP_UP1":526.3},{"wTCP_UP1":3559},{"wTCP_UP1":2587},{"wTCP_UP1":994.5},{"wTCP_UP1":865},{"wTCP_UP1":1613},{"wTCP_UP1":1635.5},{"wTCP_UP1":1465},{"wTCP_UP1":1681},{"wTCP_UP1":2146},{"wTCP_UP1":2908},{"wTCP_UP1":604.35},{"wTCP_UP1":2404},{"wTCP_UP1":1751.5},{"wTCP_UP1":1407.5},{"wTCP_UP1":1008.45},{"wTCP_UP1":2148},{"wTCP_UP1":500.3},{"wTCP_UP1":918},{"wTCP_UP1":1738.5},{"wTCP_UP1":1116.95},{"wTCP_UP1":1608.5},{"wTCP_UP1":1153.5},{"wTCP_UP1":543.85},{"wTCP_UP1":369.6},{"wTCP_UP1":2102},{"wTCP_UP1":1520.5},{"wTCP_UP1":1149.5},{"wTCP_UP1":1797.5},{"wTCP_UP1":308.6},{"wTCP_UP1":1366},{"wTCP_UP1":168},{"wTCP_UP1":1647},{"wTCP_UP1":407.4},{"wTCP_UP1":1056},{"wTCP_UP1":779.6},{"wTCP_UP1":2571.5},{"wTCP_UP1":1568},{"wTCP_UP1":1385},{"wTCP_UP1":1645},{"wTCP_UP1":2710},{"wTCP_UP1":2556},{"wTCP_UP1":1034},{"wTCP_UP1":1571},{"wTCP_UP1":239.5},{"wTCP_UP1":1362},{"wTCP_UP1":2207},{"wTCP_UP1":816},{"wTCP_UP1":962},{"wTCP_UP1":1057},{"wTCP_UP1":869},{"wTCP_UP1":444.45},{"wTCP_UP1":579.85},{"wTCP_UP1":328.7},{"wTCP_UP1":1705},{"wTCP_UP1":2740},{"wTCP_UP1":537.2},{"wTCP_UP1":1085},{"wTCP_UP1":1796},{"wTCP_UP1":930},{"wTCP_UP1":702.25},{"wTCP_UP1":628},{"wTCP_UP1":447.45},{"wTCP_UP1":1182.4},{"wTCP_UP1":620.1},{"wTCP_UP1":99.45},{"wTCP_UP1":232.65},{"wTCP_UP1":77.1},{"wTCP_UP1":1091.75},{"wTCP_UP1":349.5},{"wTCP_UP1":545},{"wTCP_UP1":3373},{"wTCP_UP1":739.3},{"wTCP_UP1":2993},{"wTCP_UP1":1505},{"wTCP_UP1":879},{"wTCP_UP1":913},{"wTCP_UP1":490.3},{"wTCP_UP1":852.5},{"wTCP_UP1":621},{"wTCP_UP1":1059},{"wTCP_UP1":618},{"wTCP_UP1":499.2},{"wTCP_UP1":1274},{"wTCP_UP1":784.85},{"wTCP_UP1":597.8},{"wTCP_UP1":48.6},{"wTCP_UP1":831},{"wTCP_UP1":841.6},{"wTCP_UP1":686.8},{"wTCP_UP1":1262},{"wTCP_UP1":674.85},{"wTCP_UP1":663},{"wTCP_UP1":265.7},{"wTCP_UP1":87.8},{"wTCP_UP1":670},{"wTCP_UP1":581.9},{"wTCP_UP1":216.5},{"wTCP_UP1":435.9},{"wTCP_UP1":791},{"wTCP_UP1":468.7},{"wTCP_UP1":761},{"wTCP_UP1":1268},{"wTCP_UP1":828.1},{"wTCP_UP1":870},{"wTCP_UP1":452.8},{"wTCP_UP1":359},{"wTCP_UP1":515.8},{"wTCP_UP1":580},{"wTCP_UP1":377.2},{"wTCP_UP1":176.55},{"wTCP_UP1":386.4},{"wTCP_UP1":209.2},{"wTCP_UP1":127.7},{"wTCP_UP1":193.3},{"wTCP_UP1":197.6},{"wTCP_UP1":201.3},{"wTCP_UP1":202.8},{"wTCP_UP1":57.7},{"wTCP_UP1":89.6},{"wTCP_UP1":285.3},{"wTCP_UP1":46.4},{"wTCP_UP1":399.7},{"wTCP_UP1":294},{"wTCP_UP1":80.8},{"wTCP_UP1":47.3},{"wTCP_UP1":15399},{"wTCP_UP1":16822},{"wTCP_UP1":15586},{"wTCP_UP1":4160},{"wTCP_UP1":16331},{"wTCP_UP1":15302},{"wTCP_UP1":12720},{"wTCP_UP1":9028},{"wTCP_UP1":11518},{"wTCP_UP1":13374},{"wTCP_UP1":13731.5},{"wTCP_UP1":15747},{"wTCP_UP1":10853},{"wTCP_UP1":13441.5},{"wTCP_UP1":17134},{"wTCP_UP1":7740},{"wTCP_UP1":7868},{"wTCP_UP1":11822},{"wTCP_UP1":14247},{"wTCP_UP1":7401.5},{"wTCP_UP1":10959},{"wTCP_UP1":8949},{"wTCP_UP1":6431},{"wTCP_UP1":15467},{"wTCP_UP1":15657},{"wTCP_UP1":6426},{"wTCP_UP1":9955.5},{"wTCP_UP1":11720.5},{"wTCP_UP1":3828.5},{"wTCP_UP1":4332},{"wTCP_UP1":5894},{"wTCP_UP1":15749},{"wTCP_UP1":12015},{"wTCP_UP1":7594},{"wTCP_UP1":2609},{"wTCP_UP1":8483.5},{"wTCP_UP1":5726},{"wTCP_UP1":8324},{"wTCP_UP1":6533},{"wTCP_UP1":3841.5},{"wTCP_UP1":9783},{"wTCP_UP1":3099.9},{"wTCP_UP1":8439.5},{"wTCP_UP1":8969},{"wTCP_UP1":8962.5},{"wTCP_UP1":10479},{"wTCP_UP1":8978},{"wTCP_UP1":10879.5},{"wTCP_UP1":6090.5},{"wTCP_UP1":6841},{"wTCP_UP1":5438},{"wTCP_UP1":8964.5},{"wTCP_UP1":9731},{"wTCP_UP1":3400.65},{"wTCP_UP1":6335},{"wTCP_UP1":5151},{"wTCP_UP1":7644.5},{"wTCP_UP1":12392},{"wTCP_UP1":2213.3},{"wTCP_UP1":15823},{"wTCP_UP1":6875},{"wTCP_UP1":1999},{"wTCP_UP1":3331.7},{"wTCP_UP1":3427.2},{"wTCP_UP1":4779.05},{"wTCP_UP1":3413.3},{"wTCP_UP1":8898},{"wTCP_UP1":12797},{"wTCP_UP1":9509},{"wTCP_UP1":5323},{"wTCP_UP1":3565.9},{"wTCP_UP1":3521.5},{"wTCP_UP1":4689},{"wTCP_UP1":2841.5},{"wTCP_UP1":847},{"wTCP_UP1":260.2},{"wTCP_UP1":3424},{"wTCP_UP1":3570.5},{"wTCP_UP1":350},{"wTCP_UP1":2107.2},{"wTCP_UP1":3414.6},{"wTCP_UP1":2094},{"wTCP_UP1":4198.5},{"wTCP_UP1":2394.4},{"wTCP_UP1":3630},{"wTCP_UP1":1055.5},{"wTCP_UP1":3263},{"wTCP_UP1":1009.8},{"wTCP_UP1":964.2},{"wTCP_UP1":911.8},{"wTCP_UP1":822.95},{"wTCP_UP1":976},{"wTCP_UP1":733.9},{"wTCP_UP1":955},{"wTCP_UP1":1221.65},{"wTCP_UP1":995},{"wTCP_UP1":984},{"wTCP_UP1":916},{"wTCP_UP1":975.3},{"wTCP_UP1":28},{"wTCP_UP1":983},{"wTCP_UP1":611},{"wTCP_UP1":973},{"wTCP_UP1":926},{"wTCP_UP1":518},{"wTCP_UP1":977},{"wTCP_UP1":969},{"wTCP_UP1":921},{"wTCP_UP1":950},{"wTCP_UP1":758},{"wTCP_UP1":931},{"wTCP_UP1":935.9},{"wTCP_UP1":281.2},{"wTCP_UP1":973.8},{"wTCP_UP1":823},{"wTCP_UP1":190.9},{"wTCP_UP1":395},{"wTCP_UP1":890.4},{"wTCP_UP1":370.5},{"wTCP_UP1":258.6},{"wTCP_UP1":297.25},{"wTCP_UP1":530.2},{"wTCP_UP1":313.5},{"wTCP_UP1":902},{"wTCP_UP1":1007.8},{"wTCP_UP1":611.1},{"wTCP_UP1":183.2},{"wTCP_UP1":785.5},{"wTCP_UP1":667.5},{"wTCP_UP1":811},{"wTCP_UP1":963},{"wTCP_UP1":448.4},{"wTCP_UP1":177.4},{"wTCP_UP1":312.3},{"wTCP_UP1":136},{"wTCP_UP1":421.4},{"wTCP_UP1":752},{"wTCP_UP1":487.1},{"wTCP_UP1":96.5},{"wTCP_UP1":274.8},{"wTCP_UP1":2836},{"wTCP_UP1":1812},{"wTCP_UP1":949},{"wTCP_UP1":615},{"wTCP_UP1":184.3},{"wTCP_UP1":1648},{"wTCP_UP1":1213},{"wTCP_UP1":1230},{"wTCP_UP1":1043},{"wTCP_UP1":1124},{"wTCP_UP1":87.3},{"wTCP_UP1":576.8},{"wTCP_UP1":587},{"wTCP_UP1":1174},{"wTCP_UP1":747},{"wTCP_UP1":71.3},{"wTCP_UP1":1167},{"wTCP_UP1":1028},{"wTCP_UP1":1183},{"wTCP_UP1":479.3},{"wTCP_UP1":981},{"wTCP_UP1":1165},{"wTCP_UP1":1016},{"wTCP_UP1":1090},{"wTCP_UP1":864},{"wTCP_UP1":1348},{"wTCP_UP1":487.9},{"wTCP_UP1":181.6},{"wTCP_UP1":776},{"wTCP_UP1":716.7},{"wTCP_UP1":722},{"wTCP_UP1":481.5},{"wTCP_UP1":176},{"wTCP_UP1":323.4},{"wTCP_UP1":231.9},{"wTCP_UP1":1141},{"wTCP_UP1":389.1},{"wTCP_UP1":799},{"wTCP_UP1":1127},{"wTCP_UP1":460},{"wTCP_UP1":134.6},{"wTCP_UP1":592},{"wTCP_UP1":469.7},{"wTCP_UP1":431.1},{"wTCP_UP1":295},{"wTCP_UP1":196.5},{"wTCP_UP1":560},{"wTCP_UP1":154.9},{"wTCP_UP1":145.2},{"wTCP_UP1":254.6},{"wTCP_UP1":873},{"wTCP_UP1":400.1},{"wTCP_UP1":1023},{"wTCP_UP1":709},{"wTCP_UP1":408.3},{"wTCP_UP1":634.4},{"wTCP_UP1":596},{"wTCP_UP1":1294},{"wTCP_UP1":897},{"wTCP_UP1":613},{"wTCP_UP1":341.1},{"wTCP_UP1":391.6},{"wTCP_UP1":958},{"wTCP_UP1":680},{"wTCP_UP1":898},{"wTCP_UP1":544.6},{"wTCP_UP1":163.6},{"wTCP_UP1":521.6},{"wTCP_UP1":180.4},{"wTCP_UP1":396.8},{"wTCP_UP1":750},{"wTCP_UP1":172.6},{"wTCP_UP1":376.3},{"wTCP_UP1":798},{"wTCP_UP1":294.6},{"wTCP_UP1":373.1},{"wTCP_UP1":642.8},{"wTCP_UP1":110.4},{"wTCP_UP1":449.8},{"wTCP_UP1":443.7},{"wTCP_UP1":726},{"wTCP_UP1":454.6},{"wTCP_UP1":507.7},{"wTCP_UP1":157.1},{"wTCP_UP1":57.2},{"wTCP_UP1":2313},{"wTCP_UP1":2384},{"wTCP_UP1":858},{"wTCP_UP1":3053},{"wTCP_UP1":1436},{"wTCP_UP1":1311},{"wTCP_UP1":936},{"wTCP_UP1":251.4},{"wTCP_UP1":261.3},{"wTCP_UP1":1394},{"wTCP_UP1":808},{"wTCP_UP1":704},{"wTCP_UP1":653.9},{"wTCP_UP1":836},{"wTCP_UP1":678},{"wTCP_UP1":600.2},{"wTCP_UP1":612},{"wTCP_UP1":569.5},{"wTCP_UP1":600.6},{"wTCP_UP1":517.4},{"wTCP_UP1":208.8},{"wTCP_UP1":208.6},{"wTCP_UP1":202.2},{"wTCP_UP1":178.1},{"wTCP_UP1":179.2},{"wTCP_UP1":125.6},{"wTCP_UP1":192.8},{"wTCP_UP1":68.2},{"wTCP_UP1":154.8},{"wTCP_UP1":247.1},{"wTCP_UP1":95.6},{"wTCP_UP1":93.7},{"wTCP_UP1":960},{"wTCP_UP1":1039},{"wTCP_UP1":918.9},{"wTCP_UP1":966},{"wTCP_UP1":1001},{"wTCP_UP1":384.9},{"wTCP_UP1":732},{"wTCP_UP1":915.1},{"wTCP_UP1":1030},{"wTCP_UP1":877},{"wTCP_UP1":989},{"wTCP_UP1":29.6},{"wTCP_UP1":1018},{"wTCP_UP1":246.7},{"wTCP_UP1":360.9},{"wTCP_UP1":928},{"wTCP_UP1":477.7},{"wTCP_UP1":1024},{"wTCP_UP1":972},{"wTCP_UP1":875},{"wTCP_UP1":830},{"wTCP_UP1":1042},{"wTCP_UP1":354.5},{"wTCP_UP1":612.9},{"wTCP_UP1":209.1},{"wTCP_UP1":668},{"wTCP_UP1":175.7},{"wTCP_UP1":133.2},{"wTCP_UP1":199},{"wTCP_UP1":279.4},{"wTCP_UP1":247.3},{"wTCP_UP1":722.9},{"wTCP_UP1":231.3},{"wTCP_UP1":699},{"wTCP_UP1":1014.7},{"wTCP_UP1":896.1},{"wTCP_UP1":348.5},{"wTCP_UP1":169.7},{"wTCP_UP1":49.7},{"wTCP_UP1":16298},{"wTCP_UP1":18324},{"wTCP_UP1":16526},{"wTCP_UP1":18320},{"wTCP_UP1":14401},{"wTCP_UP1":16179},{"wTCP_UP1":14740},{"wTCP_UP1":17530},{"wTCP_UP1":16955},{"wTCP_UP1":16545},{"wTCP_UP1":14592},{"wTCP_UP1":10274},{"wTCP_UP1":1142},{"wTCP_UP1":1343},{"wTCP_UP1":1130},{"wTCP_UP1":1197},{"wTCP_UP1":11128},{"wTCP_UP1":1160},{"wTCP_UP1":11638},{"wTCP_UP1":5477},{"wTCP_UP1":1178},{"wTCP_UP1":8858},{"wTCP_UP1":1277.8},{"wTCP_UP1":9904},{"wTCP_UP1":894},{"wTCP_UP1":6073},{"wTCP_UP1":5336},{"wTCP_UP1":9712},{"wTCP_UP1":449.2},{"wTCP_UP1":1093},{"wTCP_UP1":1009},{"wTCP_UP1":1218},{"wTCP_UP1":1206},{"wTCP_UP1":5276},{"wTCP_UP1":1174.5},{"wTCP_UP1":737.6},{"wTCP_UP1":724},{"wTCP_UP1":1283.1},{"wTCP_UP1":903.4},{"wTCP_UP1":4494},{"wTCP_UP1":1203},{"wTCP_UP1":1349},{"wTCP_UP1":975},{"wTCP_UP1":204.4},{"wTCP_UP1":656},{"wTCP_UP1":647.9},{"wTCP_UP1":161.4},{"wTCP_UP1":1115.6},{"wTCP_UP1":531.1},{"wTCP_UP1":364.8},{"wTCP_UP1":1007.7},{"wTCP_UP1":849},{"wTCP_UP1":662},{"wTCP_UP1":1175},{"wTCP_UP1":31.5},{"wTCP_UP1":561.4},{"wTCP_UP1":1025},{"wTCP_UP1":469},{"wTCP_UP1":1525},{"wTCP_UP1":1089},{"wTCP_UP1":1024.65},{"wTCP_UP1":683},{"wTCP_UP1":1017},{"wTCP_UP1":1245},{"wTCP_UP1":1091},{"wTCP_UP1":1060},{"wTCP_UP1":1244},{"wTCP_UP1":933},{"wTCP_UP1":959},{"wTCP_UP1":904.5},{"wTCP_UP1":888.5},{"wTCP_UP1":438.2},{"wTCP_UP1":844.5},{"wTCP_UP1":726.6},{"wTCP_UP1":589.4},{"wTCP_UP1":709.95},{"wTCP_UP1":737.5},{"wTCP_UP1":834.7},{"wTCP_UP1":829.4},{"wTCP_UP1":711},{"wTCP_UP1":915},{"wTCP_UP1":671.8},{"wTCP_UP1":711.5},{"wTCP_UP1":701.65},{"wTCP_UP1":754},{"wTCP_UP1":809.5},{"wTCP_UP1":536.5},{"wTCP_UP1":499.1},{"wTCP_UP1":632.4},{"wTCP_UP1":584.35},{"wTCP_UP1":351.6},{"wTCP_UP1":567},{"wTCP_UP1":610.7},{"wTCP_UP1":837},{"wTCP_UP1":468.65},{"wTCP_UP1":772.35},{"wTCP_UP1":465.6},{"wTCP_UP1":781.5},{"wTCP_UP1":361.2},{"wTCP_UP1":204},{"wTCP_UP1":817.5},{"wTCP_UP1":517.75},{"wTCP_UP1":515.35},{"wTCP_UP1":436},{"wTCP_UP1":446.7},{"wTCP_UP1":167.6},{"wTCP_UP1":616},{"wTCP_UP1":134.9},{"wTCP_UP1":285.5},{"wTCP_UP1":240.8},{"wTCP_UP1":482.1},{"wTCP_UP1":384.3},{"wTCP_UP1":3435},{"wTCP_UP1":2395.5},{"wTCP_UP1":2950},{"wTCP_UP1":2504.5},{"wTCP_UP1":3553.5},{"wTCP_UP1":2168.5},{"wTCP_UP1":2048.5},{"wTCP_UP1":1885.5},{"wTCP_UP1":2363.5},{"wTCP_UP1":2471.5},{"wTCP_UP1":1091.6},{"wTCP_UP1":1166.45},{"wTCP_UP1":883.9},{"wTCP_UP1":1760},{"wTCP_UP1":2480},{"wTCP_UP1":1246},{"wTCP_UP1":2766},{"wTCP_UP1":1894.5},{"wTCP_UP1":2727.5},{"wTCP_UP1":1791},{"wTCP_UP1":1663.5},{"wTCP_UP1":1994.5},{"wTCP_UP1":1232.2},{"wTCP_UP1":235.2},{"wTCP_UP1":1193.5},{"wTCP_UP1":434.2},{"wTCP_UP1":2265.5},{"wTCP_UP1":819.9},{"wTCP_UP1":637.25},{"wTCP_UP1":1052},{"wTCP_UP1":416},{"wTCP_UP1":1799},{"wTCP_UP1":409.6},{"wTCP_UP1":337.1},{"wTCP_UP1":553.95},{"wTCP_UP1":1116.4},{"wTCP_UP1":663.55},{"wTCP_UP1":577.5},{"wTCP_UP1":969.75},{"wTCP_UP1":348.55},{"wTCP_UP1":791.45},{"wTCP_UP1":217.3},{"wTCP_UP1":602.5},{"wTCP_UP1":521.7},{"wTCP_UP1":124},{"wTCP_UP1":145.5},{"wTCP_UP1":729.55},{"wTCP_UP1":654.9},{"wTCP_UP1":346.75},{"wTCP_UP1":569.4},{"wTCP_UP1":662.35},{"wTCP_UP1":334.05},{"wTCP_UP1":187},{"wTCP_UP1":151.25},{"wTCP_UP1":224.1},{"wTCP_UP1":223},{"wTCP_UP1":224.6},{"wTCP_UP1":139.1},{"wTCP_UP1":69.2},{"wTCP_UP1":58.6},{"wTCP_UP1":117.5},{"wTCP_UP1":15584.5},{"wTCP_UP1":15434},{"wTCP_UP1":15971.5},{"wTCP_UP1":10702},{"wTCP_UP1":16623},{"wTCP_UP1":15538},{"wTCP_UP1":7471},{"wTCP_UP1":15334},{"wTCP_UP1":9314.9},{"wTCP_UP1":11608.5},{"wTCP_UP1":8625},{"wTCP_UP1":9771},{"wTCP_UP1":10982},{"wTCP_UP1":8666.5},{"wTCP_UP1":5658.25},{"wTCP_UP1":4989},{"wTCP_UP1":4636.45},{"wTCP_UP1":8519.5},{"wTCP_UP1":9169.6},{"wTCP_UP1":9831.65},{"wTCP_UP1":10984},{"wTCP_UP1":6348.5},{"wTCP_UP1":5604.05},{"wTCP_UP1":2996},{"wTCP_UP1":570.85},{"wTCP_UP1":8218.15},{"wTCP_UP1":2249},{"wTCP_UP1":10827},{"wTCP_UP1":8318.5},{"wTCP_UP1":2431.85},{"wTCP_UP1":5164.65},{"wTCP_UP1":4627},{"wTCP_UP1":1197.85},{"wTCP_UP1":10832.5},{"wTCP_UP1":3777.5},{"wTCP_UP1":5365.5},{"wTCP_UP1":2588},{"wTCP_UP1":768.1},{"wTCP_UP1":4481},{"wTCP_UP1":3612},{"wTCP_UP1":3069},{"wTCP_UP1":5843},{"wTCP_UP1":2269.9},{"wTCP_UP1":679.3},{"wTCP_UP1":3559.5},{"wTCP_UP1":4442},{"wTCP_UP1":3708.9},{"wTCP_UP1":1035},{"wTCP_UP1":503.1},{"wTCP_UP1":525},{"wTCP_UP1":491.35},{"wTCP_UP1":593.55},{"wTCP_UP1":845.85},{"wTCP_UP1":373.7},{"wTCP_UP1":663.1},{"wTCP_UP1":803},{"wTCP_UP1":482},{"wTCP_UP1":516},{"wTCP_UP1":1412},{"wTCP_UP1":659.3}]
2 个解决方案
解决方案1
0 2016-04-11 22:37:37
I have never worked with highcharts before, but here are a couple changes that might get you closer. 我以前从未使用过highcharts，但这里有一些可能让你更接近的变化。
First, when you're just messing around trying to get stuff to work, it's easier (at least for me) to just put everything in one file. 首先，当你只是在试图让工作变得有效时，将所有内容放在一个文件中会更容易（至少对我而言）。
Second, I think you need jQuery. 其次， 我认为你需要jQuery。 So I added that script to the top. 所以我将该脚本添加到顶部。 Also, when working with jQuery, you should put your scripts after the elements they are referencing, and better yet, put your function calls in a $(document).ready(function() { // do code here }); 此外，在使用jQuery时，您应该将脚本放在它们引用的元素之后，更好的是，将函数调用放在$(document).ready(function() { // do code here }); call. 呼叫。 This will ensure you elements are loaded to the DOM before anything tries to find them. 这将确保在尝试查找元素之前将元素加载到DOM。
Third, if you are json_encode 'ing your PHP data, you can just assign that directly to the javascript variable, no need to do new Array() . 第三，如果你是json_encode '你的PHP数据，你可以直接将它分配给javascript变量，不需要做new Array() 。
Give this a try, let me know if any errors occur: 尝试一下，如果发生任何错误，请告诉我：
<?php
// A simple PHP script demonstrating how to connect to MySQL.
// Press the 'Run' button on the top to start the web server,
// then click the URL that is emitted to the Output tab of the console.
$servername = getenv('IP');
$username = getenv('C9_USER');
$password = "";
$database = "reports2";
$dbport = 3306;
// Create connection
$db = new mysqli($servername, $username, $password, $database, $dbport);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
$query = "SELECT wTCP_UP1 FROM 1_sp12_la UNION ALL SELECT wTCP_UP1 FROM 1_sp12_rs UNION SELECT wTCP_UP1 FROM 1_sp12_sf";
$result = mysqli_query($db, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Area Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var js_array = <?php echo json_encode($data); ?>;
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b> <br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
data: js_array
}]
});
});
</script>
</body>
</html>
解决方案2
0 2016-04-16 08:36:48
Highchart uses custom formatted json. Highchart使用自定义格式化的json。 Specifically for your case, you can try this : 特别针对您的情况，您可以尝试这样做：
<?php
$servername = getenv('IP');
$username = getenv('C9_USER');
$password = "";
$database = "reports2";
$dbport = 3306;
$db = new mysqli($servername, $username, $password, $database, $dbport);
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
echo "Connected successfully (".$db->host_info.")";
$query = "SELECT wTCP_UP1 FROM 1_sp12_la UNION ALL SELECT wTCP_UP1 FROM 1_sp12_rs UNION SELECT wTCP_UP1 FROM 1_sp12_sf";
$result = mysqli_query($db, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result))
{
$data[] = $row;
}
$json_data = json_encode($data, JSON_NUMERIC_CHECK);
$data2 = str_replace('{"wTCP_UP1":', '', $json_data);
$data3 = str_replace('}', '', $data2);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Area Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
<script type = "text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Uptime',
data: <?php echo $data3;?>
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The last 2 str_replace function just removes {"wTCP_UP1": and } from the resulting json to have a format like this: 最后2个str_replace函数只是从生成的json中删除{"wTCP_UP1":和} ，使其具有如下格式：
[6163,13622,456.1,2142.3,6317,1710,............659.3]
You can make this comma seperated string in your while loop without encoding it to json and removing unwanted characters. 您可以在while循环中创建此逗号分隔字符串，而无需将其编码为json并删除不需要的字符。
With your sample json output, my result looks like this: 使用示例json输出，我的结果如下所示：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在HighCharts中绘制JSON数据时遇到问题 - Having Trouble Plotting JSON Data in HighCharts
从 json 过滤数据时遇到问题 - Having trouble filtering the data from json
无法从服务器格式化此JSON数据 - Having trouble formatting this JSON data from the server
来自mysql / php json编码数据和jquery的lazyload内容 - LazyLoad content from mysql/php Json encoded data and Jquery
使用AJAX从数据库获取JSON数据时遇到问题 - Having trouble getting JSON data from database with AJAX
D3：无法从json数据中选择路径 - D3: Having trouble selecting a path from json data
无法从URL加载JSON数据并以HTML显示 - Having trouble loading JSON data from URL and displaying in HTML
无法显示高位图 - Having trouble showing up the highcharts
无法显示JSON数组数据 - Having Trouble Displaying JSON Array Data
淘汰赛-无法访问嵌套的JSON数据 - Knockout - Having trouble accessing nested JSON data
相关标签