Werte aus der Schleife extrahieren und zum Graphen hinzufügen

Question

Hallo Ich möchte einige Rechtecke Graphen konvertieren, wo ich Daten aus dem Titel nehme und es mit Chartist.js zu Donut-Graphen umwandeln. Ich dachte daran, dies mit for-Schleife durch alle Ct-Chart (es ist ein Tag) und Initiieren der Chartisten an jedem Tag und schiebe die Daten dort, aber das Problem ist, dass, wenn ich den Graphen initialisieren die Daten werden so nacheinander genommen in der ersten Donut-Grafik sind nur die ersten Daten, also Support3L (E) ohne AnnualLeave (E), die am zweiten Tag ist. Ich versuche Support3L (E) und AnnualLeave (E) in der ersten ct-Chart Grafik und Training (E) und Work (E) in der Sekunde zu haben.

ich glaube, das Problem in

ist

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

aber ich weiß nicht, wie alle graphsE Daten zu nehmen und es zu einem graphValue hinzuzufügen, oder ist es etwas anderes?

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

Wie ich verstehe Sie haben 4 Veranstaltungen, bei denen Titel enthält (E), zwei von ihnen haben graphisch dargestellt werden auf dem ersten Diagramm und die anderen zwei auf dem zweiten Diagramm.

Sie müssen die for Anweisung ändern, wenn Sie das Problem denken ist, das Ziel ist es, eine Reihe von Daten füllen, bevor Sie den chartist Plugin initialisieren, habe ich ein paar Änderungen:

// 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 
    }); 
} 

Diese bereits Änderungen sind auf Ihre fiddle