将数据从 $ajax 调用传递到 highcharts
Passing data from $ajax call to highcharts
我有一个 ajax 电话
$(function () {
$.ajax({
url: '../../getdaily.php',
type:'POST',
dataType: '',
success: function(output_string){
console.log(output_string);
},
error: function (xhr, ajaxOptions, thrownError){
console.log(xhr.statusText);
console.log(thrownError);
}
});
});
并且 console.log 将输出...
[{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
我可以轻松地将其粘贴到我的 data :
图表中,并获得我正在寻找的饼图
...
series: [{
type: 'pie',
name: 'Browser share',
data: [{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
}]
...
我的问题是如何让 output_string
进入 Highcharts data : <here>
。我已经尝试了各种方法将其作为变量传入并开始对此进行分拆,不知道为什么。
我用于 highcharts 并传入 id 的实际代码...
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
}]
});
为了覆盖php文件,这里是结尾的一部分
...
$mysqli->real_query("SELECT priority FROM daily");
$rows2 = array();
$numb2 = 0;
$res2 = $mysqli->use_result();
$rows2['name'] = 'Priority';
while($r2 = $res2->fetch_assoc()) {
$numb2+= $r2['priority'];
$rows2['y'] = $numb2;
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);
echo json_encode($result);
只需将您的 highcharts
包装在一个函数中,将 ajax 响应作为函数的参数传递并将数据(在参数中)加载到您的 high charts
,如:
function my_chart(response) {
$('#container').highcharts({
...
...
series: [{
type: 'pie',
name: 'Browser share',
data: response
}]
});
}
并在 ajax 响应中调用您的函数,如:
$(function () {
$.ajax({
url: '../../getdaily.php',
type:'POST',
dataType: '',
success: function(output_string){
//call my_chart function
var parsed_response = jQuery.parseJSON(output_string);
my_chart(parsed_response);
},
error: function (xhr, ajaxOptions, thrownError){
console.log(xhr.statusText);
console.log(thrownError);
}
});
});
我有一个 ajax 电话
$(function () {
$.ajax({
url: '../../getdaily.php',
type:'POST',
dataType: '',
success: function(output_string){
console.log(output_string);
},
error: function (xhr, ajaxOptions, thrownError){
console.log(xhr.statusText);
console.log(thrownError);
}
});
});
并且 console.log 将输出...
[{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
我可以轻松地将其粘贴到我的 data :
图表中,并获得我正在寻找的饼图
...
series: [{
type: 'pie',
name: 'Browser share',
data: [{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
}]
...
我的问题是如何让 output_string
进入 Highcharts data : <here>
。我已经尝试了各种方法将其作为变量传入并开始对此进行分拆,不知道为什么。
我用于 highcharts 并传入 id 的实际代码...
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
}]
});
为了覆盖php文件,这里是结尾的一部分
...
$mysqli->real_query("SELECT priority FROM daily");
$rows2 = array();
$numb2 = 0;
$res2 = $mysqli->use_result();
$rows2['name'] = 'Priority';
while($r2 = $res2->fetch_assoc()) {
$numb2+= $r2['priority'];
$rows2['y'] = $numb2;
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);
echo json_encode($result);
只需将您的 highcharts
包装在一个函数中,将 ajax 响应作为函数的参数传递并将数据(在参数中)加载到您的 high charts
,如:
function my_chart(response) {
$('#container').highcharts({
...
...
series: [{
type: 'pie',
name: 'Browser share',
data: response
}]
});
}
并在 ajax 响应中调用您的函数,如:
$(function () {
$.ajax({
url: '../../getdaily.php',
type:'POST',
dataType: '',
success: function(output_string){
//call my_chart function
var parsed_response = jQuery.parseJSON(output_string);
my_chart(parsed_response);
},
error: function (xhr, ajaxOptions, thrownError){
console.log(xhr.statusText);
console.log(thrownError);
}
});
});