我正在创建漏斗图表,使用jquery从mysql表中获取数据。在其他所有highcharts图表上工作,但在漏斗图表中失败。 这是我的代码
的index.php
<script type="text/javascript" src="high-js/funnel-chart.js"></script>
<div id="topcustomer" style="height: 500px;"></div>
漏斗chart.js之
$(function () {
var curcust = new Highcharts.Chart({
chart: {
renderTo:'topcustomer',
type: 'funnel',
marginRight: 100
},
title: {
text: 'Top 5 Customer',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: 'black',
softConnector: true
},
neckWidth: '30%',
neckHeight: '25%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
legend: {
enabled: false
},
series: [{
name: 'Current Month'
}]
});
jQuery.get('data.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i , line) {
line = line.split(/\t/);
cust = line[0] ;
traffic.push([
cust,
line[1]
]);
});
} catch (e) { }
curcust.series[0].data = traffic;
chart = new Highcharts.Chart(curcust);
});
});
data.php
$result = mysql_query("SELECT customer, SUM(amount) AS amo FROM `yearly_sales` GROUP BY customer LIMIT 5");
while($row = mysql_fetch_array($result)) {
echo $row['customer'] . "\t" . $row['amo']. "\n";
}
它不会显示任何错误,也不会生成图表。 我的代码中有任何错误吗? 请帮我解决这个问题Thanx
答案 0 :(得分:1)
编辑 - php应该像
$data = array();
while($row = mysql_fetch_array($result)) {
$data[] = array( $row['customer'], $row['amo'] );
}
echo json_encode($data);
这仍然有点混乱,但您可以在获得数据后尝试实例化图表。
$(function () {
jQuery.get('data.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i , line) {
line = line.split(/\t/);
cust = line[0] ;
traffic.push([
cust,
line[1]
]);
});
} catch (e) { }
$('#topcustomer').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'Top 5 Customer',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: 'black',
softConnector: true
},
neckWidth: '30%',
neckHeight: '25%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
legend: {
enabled: false
},
series: [{
name: 'Current Month',
data: traffic
}]
});
});
});