javascript - jQuery中使用map函数将列表的数据属性获取到数组中

Question

Working example

Fail example

我正在使用这个pie chart插入。 我想创建一个像这样的数组

            [["Male",12,"some text","#222"],
            ["Female",14,"some text","#333"]]

来自li数据属性data-value，每个属性存储一个逗号分隔的字符串:

<ul> 
 <li data-value="12 or below,6,sometext,red">12 or below</li>
 <li data-value="13 or above,19,sometext,yellow">13 or above</li>
</ul>

我没有收到任何错误，但 map 函数没有返回数组，因为饼图没有显示任何内容。有人能告诉我如何从列表中返回数组吗？

失败的代码

function chart(stats){
   new Chart.Pie('age', {
   showTooltips : true, 
   chartMinSize : [200, 200], 
   chartMaxSize : [250, 250], 
   chartData :  stats
   });
}    

var arr = [],
    stats = $('.piearea').find('li').map(function()    
            {
               var value = $(this).each(function(){
                   arr =  [$(this).data('value').split(',')];
            })
    return value;
});       
console.log(stats);

chart(stats);

HTML:

   <div class="piearea">
    <div id='age' class='myChart' style='position:relative;width:250px;height:250px;'></div>
     <ul>
       <li data-value="12 or below,6,sometext,red">12 or below
       </li><li data-value="13 or above,19,sometext,yellow">13 or above</li>
    </ul>
   </div>

Answer 1

有 2 个问题。

1. .map() 的使用不正确
2. 颜色应该是十六进制值(没有使用过上述插件，所以不知道是否有办法让颜色名称起作用)

function chart(stats) {
  new Chart.Pie('age', {
    showTooltips: true,
    chartMinSize: [200, 200],
    chartMaxSize: [250, 250],
    chartData: stats
  });
}

var arr = [],
  stats = $('.piearea li').map(function() {
    return [$(this).data('value').split(',')];
  }).get();
console.log(stats);
console.log(JSON.stringify(stats));

chart(stats);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://article-sharing.com/pie.js"></script>
<div class="piearea">
  <div id='age' class='myChart' style='position:relative;width:250px;height:250px;'></div>
  <ul>
    <li data-value="12 or below,6,sometext, #222">12 or below</li>
    <li data-value="13 or above,19,sometext, #333">13 or above</li>
  </ul>
</div>