來自數據的jquery圖表attr highcharts

Question

我不確定我是否在這裏朝着正確的方向發展，但基本上我希望能夠創建幾個都包含一些dat attr（名稱，值）的div。這些應該循環遍歷，並用對象創建一個數組。這個數組將與highchart js一起使用，以創建餅圖。

這是我

因此從div的數據時，應做成陣列，以及basicly被用作highchart意甲中的數據。

我想我應該做一些循環，但我有點失落。請幫助

HTML

<div class="container" data-name="Hans, Peter, Susan" data-value="20, 25, 40"></div> 

<div class="container" data-name="Josh, Johan, Tina" data-value="30, 55, 10"></div> 

的Javascript

$('.container').highcharts({ 

        title: false, 
        tooltip: false, 
        plotOptions: { 
         pie: { 
          allowPointSelect: false, 
          dataLabels: { 
           enabled: true, 
           color: '#000000', 
           connectorColor: 'none', 
           format: '<b>{point.name}</b>: <br /> {point.percentage:.1f} %' 
          } 
         } 
        }, 
        series: [{ 
         type: 'pie', 
         name: 'Browser share', 
         data: [ 
          { 
           name: 'Peter', 
           y: 26 
          }, 
          { 
           name: 'Susan',  
           y: 23 
          } 
         ], 
         animation : true 
        }] 
       }); 
      }) 

Answer 1

你的確需要循環的圖表和數據，從屬性獲取數據。您在這裏：http://jsfiddle.net/3bQne/1045/

var containers = $('.container'); 

$(containers).each(function (ind, con) { 
    var $con = $(con), 
     data = $con.attr('data-value').split(', '), 
     names = $con.attr('data-name').split(', '), 
     dLen = data.length, 
     points = [], 
     i = 0; 

    for (; i < dLen; i++) { 
     points.push([names[i], parseInt(data[i], 10)]); 
    } 
    console.log(points); 

    $con.highcharts({ 
     title: false, 
     tooltip: false, 
     plotOptions: { 
      pie: { 
       allowPointSelect: false, 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: 'none', 
        format: '<b>{point.name}</b>: <br /> {point.percentage:.1f} %' 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: points, 
      animation: true 
     }] 
    }); 
})