Question

Hello Guys我正在使用JQPlot来显示饼图。我是Jquery的新手，这就是为什么我在Jquery中操作数组很难。

这是将传递给Jquery的数组结构，它是动态的

array (size=8)
  0 => 
    array (size=1)
      'Baseball' => string '12.18' (length=5)
  1 => 
    array (size=1)
      'Basketball' => string '8.12' (length=4)
  2 => 
    array (size=1)
      'Boxing' => string '5.54' (length=4)
  3 => 
    array (size=1)
      'Golf' => string '6.64' (length=4)
  4 => 
    array (size=1)
      'Soccer' => string '36.90' (length=5)
  5 => 
    array (size=1)
      'Tennis' => string '27.31' (length=5)
  6 => 
    array (size=1)
      'Football' => string '2.21' (length=4)
  7 => 
    array (size=1)
      'Hockey' => string '1.11' (length=4)

我希望这些数据显示在我的饼图上。到目前为止，这是我的代码。

  $(document).ready(function(){

        var sports = $('#sports').val();
        // sports - this variable holds the data array 
        jQuery.jqplot.config.enablePlugins = true;
        plot1 = jQuery.jqplot('chart1',[sports], 
        [[['Verwerkende FruedenStunde Companaziert Eine industrie', 9],['Retail', 8], ['Primaire producent', 7], 
        ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], `
// this is where i put the data from array but idont know  how` 
        {
            title: '', 
            seriesDefaults: {
            shadow: false, 
            renderer: jQuery.jqplot.PieRenderer, 
            rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: true } 
             }, 
        legend: { show:true, location: 'w' }
        });
    });

Answer 1

这是我的解决方案

$(document).ready(function(){
    var s = $.parseJSON($('#sports').val());
    var s1= [];
    for(d in s)
    {
        for (ix in s[d]) {
            s1.push([ix , parseFloat(s[d][ix])])
        }
    }
    console.log(s1)

    jQuery.jqplot.config.enablePlugins = true;
    plot1 = jQuery.jqplot('chart1',[s1],
    {
        title: 'Percentage of Bets by Sport', 
        seriesDefaults: {
        shadow: false, 
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: { 
            showDataLabels: true,
            dataLabelThreshold:0,
            padding: 20, 
            sliceMargin: 2, 
            diameter: 400,
            showDataLabels: true } 
         }, 
    legend: { show:true, location: 'ne' }
    });
});

在JQplot中显示动态数据

1 个答案: