Ostatni element Zingcharta zmienia kolor i nie pasuje do legendy.

Question

Kolor mojego ostatniego elementu zingchart nie pasuje do legendy i zmienia się w przeciwieństwie do innych. Jakieś pomysły? Wszystko inne działa dobrze. Chociaż analizuję te dane za pomocą bazy danych MySQL, tak wygląda JavaScript.

Mój kod:

<script> 
    var myData = ["12","15","7","20","2","22","10","7","7","10","8","15","9"]; 
    var myData = myData.map(parseFloat); 
    var myLabels = ["General Verbal Insults","General Beatings\/Pushing","Terrorizing\/Threatening Remarks","False Gossip Inflation (Rumors)","Discrimination","Rough Fighting","Sexual Utterance\/Assaults","General Exclusion","Theft","Racist Utterance\/Assaults","Personal Property Damage","Internet Related (Cyber)","Other\/Unspecified"]; 

    window.onload=function(){ 

     var colorCharacters = "ACDEF"; 
     var globalStylesArray = []; 

     var myConfig = { 
      type: "bar", 
      legend:{}, 
      title: { 
      "text":"Showing Results For: Canada", 
      "color":"green" 

      }, 
      subtitle: { 
      "text":"Total Bullying Incidents In Country: 144", 
      "color":"blue" 
      }, 
      series : [{"values":[ myData[0] ],"text":"General Verbal Insults",},{"values":[ myData[1] ],"text":"General Beatings/Pushing",},{"values":[ myData[2] ],"text":"Terrorizing/Threatening Remarks",},{"values":[ myData[3] ],"text":"False Gossip Inflation (Rumors)",},{"values":[ myData[4] ],"text":"Discrimination",},{"values":[ myData[5] ],"text":"Rough Fighting",},{"values":[ myData[6] ],"text":"Sexual Utterance/Assaults",},{"values":[ myData[7] ],"text":"General Exclusion",},{"values":[ myData[8] ],"text":"Theft",},{"values":[ myData[9] ],"text":"Racist Utterance/Assaults",},{"values":[ myData[10] ],"text":"Personal Property Damage",},{"values":[ myData[11] ],"text":"Internet Related (Cyber)",},{"values":[ myData[12] ],"text":"Other/Unspecified",}] 
     }; 

     zingchart.render({ 
      id : 'myChart', 
      data : myConfig, 
      width:"100%", 
      height:500, 

     }); 
     zingchart.gload = function(p) { 
      console.log(p); 
      var graphId = p.id; 
      var graphData = {}; 
      graphData = zingchart.exec(graphId, 'getdata'); 
      graphData = graphData.graphset[0] ? graphData.graphset[0] : graphData; 
      console.log(graphData); 
      createColors(graphData.series[0].values.length); 

     zingchart.exec(graphId, 'modifyplot', { 
      data: { 
       styles: globalStylesArray 
      } 
      }); 
     } 

     function createColors(seriesLength) { 
      console.log('-------createColor seriesLength: ', seriesLength); 
      globalStylesArray = []; 
      for (var i = 0; i < seriesLength; i++) { 
      var colorString = '#'; 
      for (var j = 0; j < 6; j++) { 
       colorString += colorCharacters.charAt(Math.floor(Math.random() * (colorCharacters.length - 4))); 
      } 
      globalStylesArray.push(colorString); 
      } 

      console.log('-----globalStylesArray-------', globalStylesArray); 
     } 

    }; 
    </script> 

Answer 1

Nawiązując do komentarza na OP:

Chcę po prostu wszystko kolor jest inny, ponieważ nie wiem ile elementy są w MyData - jego generowane poprzez PHP & MYSQL

Jeśli chcesz, aby wszystkie kolory były różne, usuń funkcję zingchart.gload i createCo Funkcja lors. ZingChart będzie dynamicznie tworzyć różne kolory dla każdej serii.

Jeśli chcemy określić każdy z tych kolorów z wyprzedzeniem, ponieważ nie wiem ile seria dane będą produkować, trzeba będzie zastosować motyw do konfiguracji wykresu: http://www.zingchart.com/docs/design-and-styling/javascript-chart-themes/