是的，我知道这个问题已经在 stackoverflow 中以不同的方式被问过很多次了。 但我真的不明白如何在highchart中显示mysql数据。 老实说，我已经为此工作了几天，但无法弄清楚。 如果有人能帮助我解决这个问题，我真的很高兴
这是我的 php 和 mysql 代码
data.php
<?php
require_once '../includes/database.php';
require_once '../includes/customer.php';
$customers= Customer::find_by_sql("SELECT cust_name,monthly_income FROM customer");
$rows=array();
foreach ($customers as $customer) {
$row[0]=$customer->cust_name;
$row[1]=$customer->monthly_income;
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
?>
这将输出这样的数据系列 [["Madhava",55000],["Praveen",50000],["Nuwan",120000],["Thilan",100000]]
现在我想在条形图中显示这些数据，其格式应如下
Monthly Income
^
|
|
|
|
-------------->Customer Name
Figure - Expected output of the bar chart
现在我将把它们显示在图表中 我复制了下面的代码from other website并且真的不知道如何更改该代码以使其按照我的要求工作
highcharts.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Pie Chart</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Customer Name Vs Income'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
}
$.getJSON("data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
}); </script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我应该在 highcharts.php 中进行哪些更改才能实现此功能？
最佳答案
$(function () {
jQuery.extend({
getValues: function(url) {
var result = null;
$.ajax({
url: url,
type: 'get',
dataType: 'json',
async: false,
success: function(data) {
result = data;
}
});
return result;
}
});
var myServerData = $.getValues("data.php"); //direct this to your PHP script and make sure that right JSON is returned
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart Title Here'
},
subtitle: {
text: 'Place subtitle here'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Monthly income (USD or whatever...)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Monthly income: <b>{point.y:.1f} USD</b>',
},
series: [{
name: 'Monthly Income',
data: myServerData,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
关于php - 如何使用mysql数据(PHP)创建highchart？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23932711/