从循环中提取值并将其添加到图表

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