從循環中提取值並將其添加到圖表

Question

你好我想轉換幾個矩形圖，我從標題獲取數據並將其與chartist.js轉換爲圓環圖。我正在考慮用循環遍歷所有ct-chart（它的一天），並每天啓動chartist並將數據推送到那裏，但問題是，當我初始化圖形時，數據是逐一採集的，所以基本上在第一個甜甜圈圖中只有第一個數據，所以沒有AnnualLeave（E）的Support3L（E）在第二天。我試圖在第一張ct圖表和培訓（E）和工作（E）中使用Support3L（E）和AnnualLeave（E）。

我認爲這個問題是在

for (i = 0; i < $graphContainer.length; i++) { 
    graphValue[i] = $graphsE.eq(i).width(), 
    graphClass[i] = $graphsE.eq(i).attr('class'); 
... 

，但我不知道如何採取一切graphsE數據，並將其添加到一個graphValue還是別的東西？

DEMO：https://jsfiddle.net/767ndb9s/11/

HTML：

<div title="13. 6." class="WorkDayInnerDivEven ct-chart"> 
    <div title="Support3L (M) 
8:00 - 16:00 (8h)" class="Event_Support3L work-day-graph" style="left: 40%; width: 30%; display: none;"> 
    </div> 

    <div title="AnnualLeave (M) 
9:00 - 17:00 (8h)" class="Event_AnnualLeave work-day-graph" style="left: 43.75%; width: 30%; display: none;"> 
    </div> 

    <div title="Support3L (E) 
8:00 - 16:00 (8h)" class="Event_Support3L work-day-graph" style="left: 40%; width: 30%; top: 85%; display: none;"> 
    </div> 

    <div title="AnnualLeave (E) 
9:00 - 17:00 (8h)" class="Event_AnnualLeave work-day-graph" style="left: 43.75%; width: 30%; top: 35%; display: none;"> 
    </div> 
</div> 

<div title="14.6" class="WorkDayInnerDivEven ct-chart"> 
    <div title="Training (M) 
3:00 - 8:00 (5h)" class="Event_Training work-day-graph" style="left: 21.25%; width: 18.75%; display: none;"> 
    </div> 

    <div title="Overtime (M) 
8:00 - 16:00 (8h)" class="Event_Overtime work-day-graph" style="left: 40%; width: 30%; display: none;"> 
    </div> 

    <div title="Work (M) 
17:00 - 23:00 (6h)" class="Event_Work work-day-graph" style="left: 73.75%; width: 22.5%; display: none;"> 
    </div> 

    <div title="Training (E) 
3:00 - 8:00 (5h)" class="Event_Training work-day-graph" style="left: 21.25%; width: 18.75%; top: 35%; display: none;"> 
    </div> 

    <div title="Overtime (E) 
8:00 - 16:00 (8h)" class="Event_Overtime work-day-graph" style="left: 40%; width: 30%; top: 35%; display: none;"> 
    </div> 

    <div title="Work (E) 
17:00 - 23:00 (6h)" class="Event_Work work-day-graph" style="left: 73.75%; width: 22.5%; top: 35%; display: none;"> 
    </div> 
</div> 

JS：

var circlesLayout = function() { 

    var $graphContainer = $('.ct-chart'), 
     //only the graph with (E) in title is used for donut graph not   overtime 
     $graphsE = $graphContainer.find('.work-day-graph[title~="(E)"]').not('.work-day-graph[title~="Overtime"]'), 
     graphValue = [$graphsE], 
     graphClass = []; 

    //hide desktop rectangle-graph 
    $('.ct-chart div.work-day-graph').hide(); 

    //add class circles (its for css) 
    $('html').addClass('circles'); 

    //init chartist 
    for (i = 0; i < $graphContainer.length; i++) { 
     graphValue[i] = $graphsE.eq(i).width(), 
     graphClass[i] = $graphsE.eq(i).attr('class'); 

     new Chartist.Pie($graphContainer[i], { 
      series: [{ 
       value: graphValue[i], 
       className: graphClass[i] 
      }] 
     }, { 
      donut: true, 
      donutWidth: 10, 
      donutSolid: true, 
      startAngle: 270, 
      showLabel: false 
     }); 
    } 
} 
circlesLayout(); 

Answer 1

據我所知，您有4個比賽時，標題中包含（E），他們兩個都以圖形在第一張圖上，另外兩張在第二張圖上。

您需要修改for說法，你認爲問題是，我們的目標是你初始化圖表製作插件之前填充數據的數組，我做了一些修改：

// Array of events 
var events = [] 
events[0] = ['Support3L', 'AnnualLeave'] 
events[1] = ['Training', 'Work'] 

//init chartist 
for (i = 0; i < $graphContainer.length; i++) { 
    var series = []; 

    for(j=0; j< $graphsE.length; j++){ 
    // fill series with the data you want to graph 
    // in this case filter Support3L(E) and AnnualLeave (E) for the first 
    // Training (E) and Work(E) for the second 
    if(events[i].some(evt=>$graphsE.eq(j).attr('class').includes(evt))) 
     series[j] = { 
      value: $graphsE.eq(j).width(), 
      className: $graphsE.eq(j).attr('class'), 
      label: j 
     }; 
    } 

    new Chartist.Pie($graphContainer[i], { 
     // Set data to graph 
     series: series 
    }, { 
     donut: true, 
     donutWidth: 10, 
     donutSolid: true, 
     startAngle: 270, 
     showLabel: false 
    }); 
} 

這些變化已經是上你的fiddle