通過Highcharts從MySQL獲得JSON編碼數據的麻煩
[英]Having trouble JSON encoded data from MySQL through Highcharts
問題描述
我一直試圖從我的php文件中解析我的數據，以使用此處的區域圖示例反映數組中的數據。 在此之前，我已將所有數據注釋掉以進入數組，但現在我只是想顯示一部分數據。 我不知道它是否與被解析的數據有關，或者我沒有正確地將數據調用到HTML文件中。 變量'js_array'以前不存在，但我認為它可以解決我的問題，但不幸的是它仍然是一個空白頁面。
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);
?>
在這里我的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>
我到處搜遍了，但沒有。 我也不是最好的JavaScript和非常新的Highcharts。 謝謝！ 如果您需要更多信息，請告訴我。
編輯：這是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
我以前從未使用過highcharts，但這里有一些可能讓你更接近的變化。
首先，當你只是在試圖讓工作變得有效時，將所有內容放在一個文件中會更容易（至少對我而言）。
其次， 我認為你需要jQuery。 所以我將該腳本添加到頂部。 此外，在使用jQuery時，您應該將腳本放在它們引用的元素之后，更好的是，將函數調用放在$(document).ready(function() { // do code here }); 呼叫。 這將確保在嘗試查找元素之前將元素加載到DOM。
第三，如果你是json_encode '你的PHP數據，你可以直接將它分配給javascript變量，不需要做new Array() 。
嘗試一下，如果發生任何錯誤，請告訴我：
<?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使用自定義格式化的json。 特別針對您的情況，您可以嘗試這樣做：
<?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>
最后2個str_replace函數只是從生成的json中刪除{"wTCP_UP1":和} ，使其具有如下格式：
[6163,13622,456.1,2142.3,6317,1710,............659.3]
您可以在while循環中創建此逗號分隔字符串，而無需將其編碼為json並刪除不需要的字符。
使用示例json輸出，我的結果如下所示：
來自mysql / php json編碼數據和jquery的lazyload內容
[英]LazyLoad content from mysql/php Json encoded data and Jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.