将动态 json 数组传递给 Highcharts 饼图 [英] To pass dynamic json array to Highcharts Pie Chart
问题描述
我将 json 编码的字符串(例如 $TEXT2 包含 ["chrome","15","firefox","20"]) 从 xcode 传递到 javascript 中的数组(例如 arr).现在我想通过此数组包含动态到 Highcharts Pie 的 json 字符串.HTML代码是
I passed json encoded string(eg. $TEXT2 consisting ["chrome","15","firefox","20"]) from xcode to an array(eg. arr) in javascript.Now I want to pass this array containing json string dynamically to Highcharts Pie. The HTML code is
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=20, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie chart</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
var arr = $TEXT2;
$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
});
});
</script>
<body>
<br>
<!-- 3. Add the container -->
<div id="container" style="width: 300px; height: 350px; margin: 0 auto"></div>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
</body>
</html>
我正在尝试使用 getjson 方法，尽管我不知道它的用法.因为我想将我的数组，即 arr 传递给 Highcharts 中的 data[]，我正在做:
I am trying to use getjson method although m unaware of its usage. Since i want to pass my array i.e arr to data[] in Highcharts,I am doing:
$.getJSON("arr", function(json) {
chart.series = json;
var chart = new Highcharts.Chart(chart);
});
任何人都可以帮助我解决问题.提前致谢.
Can anyone help me on dis. Thanks in advance.
推荐答案
我会将 JSON 调用包装在 document.ready 函数中，然后将绘图调用包装在 getJSON 的成功回调中:
I would wrap the JSON call in the document.ready function and then wrap the plot call in the getJSON's success callback:
$(document).ready(function() {
$.getJSON("arr", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
},
series: [{
type: 'pie',
name: 'Browser share',
data: json
}]
});
});
});
当然要使其正常工作，您应该修改后端代码以返回 HighCharts 期望的格式正确的数组数组:
Of course for this to work, you should modify your backend code to return a properly formatted array of arrays that HighCharts expects:
[["chrome",15],["firefox",20]]
您可以在 JS 中修复"返回的数组，但最好在 JSON 后端调用中进行.
You could "fix" your returned array in the JS, but it would be better to do it in the JSON backend call.
这篇关于将动态 json 数组传递给 Highcharts 饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
