Javascript Highcharts从数据库获取数据
我正试图将数据库中的一些数据绘制在一个图表上，但似乎无法显示这些数据 我有以下PHP（代码片段），它从数据库获取数据并对其进行json_编码：Javascript Highcharts从数据库获取数据,javascript,php,jquery,json,highcharts,Javascript,Php,Jquery,Json,Highcharts,我正试图将数据库中的一些数据绘制在一个图表上，但似乎无法显示这些数据 我有以下PHP（代码片段），它从数据库获取数据并对其进行json_编码： <?php $result = mysqli_query($cxn,"SELECT * FROM counter"); while($row = mysqli_fetch_array($result)) { $value = $row['value']; $timestamp = strtotim
<?php
$result = mysqli_query($cxn,"SELECT * FROM counter");
while($row = mysqli_fetch_array($result)) {
$value = $row['value'];
$timestamp = strtotime($row['datetime']);
$data[] = "[$value, $timestamp]";
}
json_encode($data);
?>
<html>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script>
$(function() {
$.getJSON('http://www.website.com/graph.php', function(data) { // I put website.com on purpose
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Title'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</body>
</html>
$（函数（）{
$.getJSON（'http://www.website.com/graph.php，函数（数据）{//我故意放了website.com
//创建图表
$（“#容器”）.highcharts（'StockChart'{
范围选择器：{
选定：1
},
标题：{
文本：“标题”
},
系列：[{
名称：“AAPL”，
数据：数据，
工具提示：{
数值小数：2
}
}]
});
});
});
我做错了什么？为了回答我自己的问题，我将while循环更改为：
while($row = mysqli_fetch_array($result)) {
$value = $row['value'];
$timestamp = strtotime($row['datetime']) * 1000;
$data[] = [$timestamp, (int)$value];
}
您想要为单列数据分配一个“数据”数组，这是错误的 请看这里：
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
一种解决方案是使用for循环，并在每个循环中分配数据和名称。问题是返回字符串，需要以数字形式返回数据。我建议熟悉json\u encode（）标志，如json\u NUMERIC\u CHECK。
其次，
$data[]=“[$value，$timestamp]”行需要是带有打印括号的数组而不是字符串。步骤1创建数据库[highchartdemo]
第2步创建两个表[演示\u查看器，演示\u单击]
CREATE TABLE IF NOT EXISTS `demo_viewer` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`numberofview` int(11) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
CREATE TABLE IF NOT EXISTS `demo_click` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`numberofclick` int(12) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
演示查看器表：
演示点击表格：
步骤3-创建数据库配置文件config.php
$dbHost = "localhost";
$dbDatabase = "highchartdemo";
$dbPasswrod = "root";
$dbUser = "root";
$mysqli = mysqli_connect($dbHost, $dbUser, $dbPasswrod, $dbDatabase);
?>
步骤4创建Index.php文件Index.php
<?php
require('config.php');
/* Getting demo_viewer table data */
$sql = "SELECT SUM(numberofview) as count FROM demo_viewer
GROUP BY YEAR(created_at) ORDER BY created_at";
$viewer = mysqli_query($mysqli,$sql);
$viewer = mysqli_fetch_all($viewer,MYSQLI_ASSOC);
$viewer = json_encode(array_column($viewer, 'count'),JSON_NUMERIC_CHECK);
/* Getting demo_click table data */
$sql = "SELECT SUM(numberofclick) as count FROM demo_click
GROUP BY YEAR(created_at) ORDER BY created_at";
$click = mysqli_query($mysqli,$sql);
$click = mysqli_fetch_all($click,MYSQLI_ASSOC);
$click = json_encode(array_column($click, 'count'),JSON_NUMERIC_CHECK);
?>
<!DOCTYPE html>
<html>
<head>
<title>Highcharts get data from database</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
var data_click = <?php echo $click; ?>;
var data_viewer = <?php echo $viewer; ?>;
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Yearly Website Ratio'
},
xAxis: {
categories: ['2013','2014','2015', '2016']
},
yAxis: {
title: {
text: 'Rate'
}
},
series: [{
name: 'Click',
data: data_click
}, {
name: 'View',
data: data_viewer
}]
});
});
</script>
<div class="container">
<br/>
<h2 class="text-center">Highcharts get data from database</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Graphical View</div>
<div class="panel-body">
<div id="container"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Highcharts从数据库获取数据
$（函数（）{
var数据点击=；
var数据_查看器=；
$（“#容器”）。高图({
图表：{
类型：“列”
},
标题：{
文字：“年度网站比率”
},
xAxis：{
类别：['2013'、'2014'、'2015'、'2016']
},
亚克斯：{
标题：{
文本：“费率”
}
},
系列：[{
名称：'单击'，
数据：单击“数据”
}, {
名称：“视图”，
数据：数据查看器
}]
});
});
Highcharts从数据库获取数据
图形视图
虽然这可能解决了问题，但很难看出原因。请考虑编辑你的答案，包括解释你改变了什么，为什么你改变了它，以及为什么它解决了这个问题。
<?php
require('config.php');
/* Getting demo_viewer table data */
$sql = "SELECT SUM(numberofview) as count FROM demo_viewer
GROUP BY YEAR(created_at) ORDER BY created_at";
$viewer = mysqli_query($mysqli,$sql);
$viewer = mysqli_fetch_all($viewer,MYSQLI_ASSOC);
$viewer = json_encode(array_column($viewer, 'count'),JSON_NUMERIC_CHECK);
/* Getting demo_click table data */
$sql = "SELECT SUM(numberofclick) as count FROM demo_click
GROUP BY YEAR(created_at) ORDER BY created_at";
$click = mysqli_query($mysqli,$sql);
$click = mysqli_fetch_all($click,MYSQLI_ASSOC);
$click = json_encode(array_column($click, 'count'),JSON_NUMERIC_CHECK);
?>
<!DOCTYPE html>
<html>
<head>
<title>Highcharts get data from database</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
var data_click = <?php echo $click; ?>;
var data_viewer = <?php echo $viewer; ?>;
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Yearly Website Ratio'
},
xAxis: {
categories: ['2013','2014','2015', '2016']
},
yAxis: {
title: {
text: 'Rate'
}
},
series: [{
name: 'Click',
data: data_click
}, {
name: 'View',
data: data_viewer
}]
});
});
</script>
<div class="container">
<br/>
<h2 class="text-center">Highcharts get data from database</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Graphical View</div>
<div class="panel-body">
<div id="container"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>