Question

我必须构建一个集群条形图，它具有动态生成的图并且是动态集群的。我已经成功生成了所有图表，除了显示群集的指南。我已经生成了guides数组，但是没有显示指南。谁能看到我的缺失或做错了什么？

我基于此AmCharts: Clustered bar chart with sub-categories

制作指南

chartData = [{"Poor":"0.0","Attribute":"capacity","Fair":"0.0","No Rate":"0.0","Title":"adnan test large upload","Good":"0.0"}, {"Poor":"0.0","Attribute":"capacity","Fair":"0.0","No Rate":"0.0","Title":"adnan test large upload","Good":"0.0"}, {"Poor":"0.0","Attribute":"condition","Fair":"0.0","No Rate":"0.0","Title":"adnan test large upload","Good":"0.0"}, {"Poor":"0.0","Attribute":"condition","Fair":"0.0","No Rate":"0.0","Title":"adnan test large upload","Good":"0.0"}, {"Poor":"0.0","Attribute":"function","Fair":"0.0","No Rate":"0.0","Title":"adnan test large upload","Good":"0.0"}, {"Poor":"0.0","Attribute":"function","Fair":"0.0","No Rate":"0.0","Title":"adnan test large upload","Good":"0.0"}, {"Poor":"28.0","Attribute":"capacity","Fair":"40.0","No Rate":"0.0","Title":"Another test","Good":"80.0"}, {"Poor":"28.0","Attribute":"capacity","Fair":"40.0","No Rate":"0.0","Title":"Another test","Good":"80.0"}, {"Poor":"28.0","Attribute":"condition","Fair":"40.0","No Rate":"0.0","Title":"Another test","Good":"80.0"}, {"Poor":"28.0","Attribute":"condition","Fair":"40.0","No Rate":"0.0","Title":"Another test","Good":"80.0"}, {"Poor":"28.0","Attribute":"function","Fair":"40.0","No Rate":"0.0","Title":"Another test","Good":"80.0"}, {"Poor":"28.0","Attribute":"function","Fair":"40.0","No Rate":"0.0","Title":"Another test","Good":"80.0"},....]

我简化了数据，我想您会看到它的本质。

这是代码，请注意我正在使用基于对象的amChart模型。

function drawChartSAMPfig3(chartData, target){
if(chartData.length !== 0){
    var graphs =  []
    var i = 0
    var colours = ['#b01f39','#66cc33','#fbb03b','#fffff','#000000']
    var Titles = []
    for (c = 0; c < chartData.length; c ++){
        Titles[c] = chartData[c]["Title"];
    }

Titles = Array.from(new Set(Titles))
    var Keys = Object.keys(chartData[0])
    var Attribute = Keys.filter(item => item !== "Title")
    Attribute = Attribute.filter(item => item !== "Attribute")
    var guides = []

Titles.forEach(function(Titles){
    guides.push({"category": Titles[0],
                  "toCategory": Titles[Titles.length - 1],
                  "lineAlpha": 0,
                  "expand": true,
                  "label": Titles,
                  "labelRotation": 0,
                  "tickLength": 80
              })
        })

Attribute.forEach(function(Attribute){
    i++
    graphs.push({
            "valueField": Attribute,
            "title": Attribute,
            "type": 'column',
            "labelText": '[[value]]%',
            "fillColors": colours[i],
            "lineColor": colours[i],
            "labelOffset": 10,
            "fillAlphas": 1,
            "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
            "stackable": false
      })
    })

$(function(){
    var oChart                      = new AmCharts.AmSerialChart();
        oChart.pathToImages             = "thirdparty/amcharts/images/";
        oChart.dataProvider             = chartData;
        oChart.categoryField            = "Attribute";
        oChart.angle                    = 0;
        oChart.depth3D                  = 0;
        oChart.rotate                   = false;
        oChart.gridAboveGraphs          = true;
        oChart.startDuration            = 0;
        oChart.backgroundAlpha          = 0.8;
        oChart.type                     = "serial";
        oChart.fontFamily               =  "Roboto-Light, Muli, Arial, Verdana, SansSerif";
        oChart.categoryAxis             = { "gridAlpha": 0,
                                            "labelRotation": 90,
                                            "guides" : guides,
                                            "position": "left"
                                            };
        oChart.columnWidth              = 0.55;
        oChart.graphs = graphs
        oChart.valueAxes = [
            {
                "id": "ValueAxis-1",
                "stackType": "regular",
                "axisAlpha": 0,
                "minimum": 1,
                "position": "left",
            }
        ],
        oChart.legend  = [{
            "enabled": true,
            "useGraphSettings": true,
            //"maxColumns": 8,
            "size": 8
        }],
        oChart.titles = [{
            "id": "Figure 3",
            "size": 18,
            "text": "Figure 3"
            }]

        oChart.write(target);
            });
        } 
    }

这就是我要得到的（显示完整数据集的图表）。

动态集群图和指南

0 个答案: