使用带有JSON的Jq图创建饼图

时间:2012-11-02 04:52:08

标签: javascript jquery asp.net charts jqplot

我使用以下函数创建图表它工作正常。

$(document).ready(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {

          showDataLabels: true
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});

我的问题是如果我在另一个数组中获得JSON并且我将该数组用于饼图它将无法工作。这意味着......

$(document).ready(function(){
 var data1= new Array();
  data1=[['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]];

  var plot1 = jQuery.jqplot ('chart1', [data1], 
    { 
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {

          showDataLabels: true
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});

3 个答案:

答案 0 :(得分:2)

试试这个,工作正常。

 $.getJSON('/mcontraller/getvalues', function(data) {
        var items1 = new Array();
        var j=0;
        for ( var i in data ) {
            var items = new Array();
            items.push(i,Number(data[i]));
            items1[j++] = items;
        }

        var plot1 = jQuery.jqplot('chart1', eval([items1]), {

                    seriesDefaults:{
                        // Make this a pie chart.
                        renderer:jQuery.jqplot.PieRenderer,
                        rendererOptions:{
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            dataLabels:'value',
                            showDataLabels:true
                        }
                    },
                    legend:{ show:true, location:'e' }
                }
        );

    });

答案 1 :(得分:0)

用于绘制图表的图表数据作为字符串传递,因此我使用eval将其解析为对象,并且工作正常。     eval(data1)

答案 2 :(得分:0)

我自己尝试了你的代码。它工作得很好。我不认为有任何错误。可能你应该检查对jqplot.pieRenderer.min.js

的引用