Question

我想使用这个脚本：http://codepen.io/githiro/pen/xABCi

你可以像这样设置每一件：

  $("#pieChart").drawPieChart([
    { title: "Tokyo",         value : 180,  color: "#02B3E7" },
    { title: "San Francisco", value:  60,   color: "#CFD3D6" },
    { title: "London",        value : 50,   color: "#736D79" },
    { title: "New York",      value:  30,   color: "#776068" },
    { title: "Sydney",        value : 20,   color: "#EB0D42" },
    { title: "Berlin",        value : 20,   color: "#FFEC62" },
    { title: "Osaka",         value : 7,    color: "#04374E" }
  ]);

我想动态设置设置/片段。这就是我的尝试：

$('.pieChart').each(function(index) {

    var queryArr = [];
    $('.pieChartPieces').each(function(index) {

        var _pieceTitle = $(this).data('title');
        var _pieceValue = $(this).data('value');
        var _pieceColor = $(this).data('color');

        var pieces = {                              
           "title" :_pieceTitle,
           "value" :_pieceValue,
           "color" :_pieceColor
        };
        queryStr = { "pieces" : pieces };
        queryArr.push(queryStr);

    });

    $(this).drawPieChart(queryArr);

});

    <div class="pieChart chart">
        <div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"></div>
        <div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"></div>
        <div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"></div>
        <div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"></div>
        <div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"></div>
        <div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"></div>
        <div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"></div>
    </div>

但它不起作用。我猜它是因为我创建了一个对象但是函数drawPieChart实际上还需要其他东西吗？

Answer 1

尝试替换此部分

 var pieces = {                              
           "title" :_pieceTitle,
           "value" :_pieceValue,
           "color" :_pieceColor
        };
        queryStr = { "pieces" : pieces };
        queryArr.push(queryStr);

通过

 var pieces = {                              
       "title" :_pieceTitle,
       "value" :_pieceValue,
       "color" :_pieceColor
    };
    queryArr.push( pieces );

Answer 2

在这种情况下，您可以将dataset与.map()方法结合使用，它可以让您创建一个包含每个data-*属性对象的数组：

＆＃13;

var arr = $('.pieChartPieces').map(function(){
  return {"pieces":this.dataset};
}).get(); // returns array

$('pre').html("piechartData:::"+JSON.stringify(arr));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pieChart chart">
  <div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"></div>
  <div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"></div>
  <div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"></div>
  <div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"></div>
  <div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"></div>
  <div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"></div>
  <div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"></div>
</div>
<pre></pre>

＆＃13;

jquery如何动态创建数组

2 个答案: