将动态json数组传递给Highcharts饼图

我从xcode传递了json编码的字符串（例如$ TEXT2由[“chrome”，“15”，“firefox”，“20”]）为一个数组（例如arr ）在javascript.Now我想要将包含json字符串的数组动态地传递给Highcharts Pie。 HTML代码是将动态json数组传递给Highcharts饼图

<!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方法，虽然m不知道它的用法。因为我想通过我的数组即ARR在Highcharts数据[]，我是这样做的：

$.getJSON("arr", function(json) { 
chart.series = json;    
var chart = new Highcharts.Chart(chart); 
    });

谁能帮我上DIS。在此先感谢。

来源

2011-11-21 rehan

我想包的JSON调用中的document.ready函数，然后包裹情节通话中的getJSON的成功回调：

$(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预计：

[["chrome",15],["firefox",20]]

你可以“固定”在JS你返回数组，但它会更好，做的JSON后端调用。

来源

2011-11-21 18:05:09 Mark

我想在JS返回数组转换，我尝试了几种方法，但不能做此格式如。 [['chrome'，15]，['firefox'，20]]这是Highcharts的可接受格式 – rehan

已完成的家伙，非常感谢您的帮助:) – rehan

所以在这一刻，一切运作良好？ –

您可以直接将图表与JSON数据绑定。您只需将json属性名称设置为高图标准。 'Y'代表价值，'name'代表标签。

你的JSON应该像如下：

[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]

来源

2014-01-20 09:36:36 zerg

简单地做：用jQuery为波纹管

创建数组：

$.each(data['values'], function(i, val) { 
        x_values_sub['name'] = i 
        x_values_sub['y'] = val 
        x_values.push(x_values_sub); 
        x_values_sub = {}; 
});

//然后调用这个数组HighCharts数据

series: [{ 
          type: 'pie', 
          name: null, 
          data: x_values 
}]

//测试，并将它与简单的JavaScript对象的工作：

Object Part1Name: 25 Part2Name: 75__proto__: Object

来源

2015-04-10 14:56:01 Xanarus

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     alert('call pie'); 

     var data1 = $("#dataidd").val(); 
     alert('pie data' + data1); 


     /*--------Pie Chart---------*/ 
     $('#PieChartDiv').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Comparision and Analysis Report' 
      }, 
      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: 'Issue Details', 
       // data: jQuery.parseJSON(data1) 
       data: JSON.parse(data1) 

      }] 
     }); 
    }); 
    </script>

来源

2015-06-16 12:55:25

将动态json数组传递给Highcharts饼图

回答

相关问题