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

【问题标题】：To pass dynamic json array to Highcharts Pie Chart将动态 json 数组传递给 Highcharts 饼图
【发布时间】：2012-01-03 04:54:27
【问题描述】：

我将 json 编码字符串（例如 $TEXT2 包含 ["chrome","15","firefox","20"]）从 xcode 传递到 javascript 中的数组（例如 arr）。现在我想通过此数组包含动态到 Highcharts Pie 的 json 字符串。 HTML 代码是

<!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[]，所以我正在做：

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

谁能帮我解决这个问题。提前致谢。

【问题讨论】：

标签： arrays json highcharts

【解决方案1】：

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

您的 JSON 应如下所示：

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

【讨论】：

【解决方案2】：

<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>

【讨论】：

【解决方案3】：

只需做：

使用 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

【讨论】：

【解决方案4】：

我会将 JSON 调用包装在 document.ready 函数中，然后将 plot 调用包装在 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 后端调用中进行。

【讨论】：

我想在JS中转换返回的数组，我尝试了几种方法但无法以这种格式进行，例如。 [['chrome',15],['firefox',20]] 这是Highcharts可接受的格式
@rehan。我面临着与您在 highcharts 中遇到的同样的问题。你能帮我如何获得那些特定格式的[['chrome'，15]，['firefox'，20]]。另外我已经发布了问题，请检查它使用 Highcharts 显示甜甜圈 hightchart 具有动态数据