Zingchart最后一个元素一直在变颜色，与图例不匹配

Question

我的 zingchart 最后一个元素的颜色与图例不匹配，并且不断变化，与其他元素不同。有任何想法吗？其他一切都很好。虽然我通过 MySQL 数据库解析这些数据，但 JavaScript 看起来是这样的。

我的代码：

 <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 = "ACDEF0123456789";
        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

参考 OP 上的评论：

I just want all color to be different, since i dont know how many elements are in MyData - its generated through PHP & MYSQL

如果您只想让所有颜色都不同，请删除 zingchart.gload 函数和 createColors 函数。 ZingChart 会动态地为每个系列创建不同的颜色。

如果您确实想提前指定这些颜色中的每一种，因为您不知道您的数据将产生多少个系列，则需要将主题应用于您的图表配置：http://www.zingchart.com/docs/design-and-styling/javascript-chart-themes/

Zingchart最后一个元素一直在变颜色，与图例不匹配

Zingchart last element keeps changing color and not matching with legend

html

javascript

zingchart