剑道堆积条形图类别

Question

我在此JSON格式的数据：

var demoData = [{ 
    Name: 'Category_1', 
    Total: 100, 
    Items: [{ 
     Name: 'Sub_Category_1_1', 
     Total: 50 
     }] 
    },{ 
    Name: 'Category_2', 
    Total: 20, 
    Items: [{ 
     Name: 'Sub_Category_2_1', 
     Total: 15 
     },{ 
     Name: 'Sub_Category_2_2', 
     Total: 45 
    }] 
}]; 

我用这个数据，剑道堆积条形图，但首先我解析得到一个平坦的列表：

for (var i = 0; i < data.length; i++) { 
    for (var j = 0; j < data[i].Items.length; j++) { 
     dataArray.push({ 
      name: data[i].Items[j].Name, 
      stack: data[i].Name, 
      data: [data[i].Items[j].Total] 
     }); 
    } 
} 

一切正常，但是，我想在栏下显示类别名称。但是，当我加

categoryAxis: { 
    categories: catNames 
} 

其中cats是阵列['Category_1', 'Category_2', ....]，它发生，所有的渲染酒吧得到名为“Category_1”和“Category_2”类别等有上面没有酒吧。

我应该如何配置kendo图表以正确显示类别名称？

我已经尝试将数据提供给dataSource并将其分组，而不是使用series，但我得到了类似的结果。

kendo dojo example

Answer 1

首先，你的数据看起来有点不正确，你希望你的子类别重复。每个分类应该包含所有子类例如：

var demoData = [{ 
Name: 'Category_1', 
Total: 100, 
Items: [{ 
    Name: 'Sub_Category_1', 
    Total: 50 
},{ 
    Name: 'Sub_Category_2', 
    Total: 45 
},{ 
    Name: 'Sub_Category_3', 
    Total: 5 
},{ 
    Name: 'Sub_Category_4', 
    Total: null 
}] 
},{ 
Name: 'Category_2', 
Total: 20, 
Items: [{ 
    Name: 'Sub_Category_1', 
    Total: 15 
},{ 
    Name: 'Sub_Category_2', 
    Total: 45 
},{ 
    Name: 'Sub_Category_3', 
    Total: null 
},{ 
    Name: 'Sub_Category_4', 
    Total: null 
}] 
},.... 

您还需要组通过设置数据源的数据：

var ds = new kendo.data.DataSource({ 
data: parsedData.seriesArray, 
    group: { 
    field: "name", 
    }, 
    sort: [ 
    { field: "stack", dir: "asc" }, 
    { field: "name", dir: "asc" }, 
    ] 
}); 

现在设置您的系列的CategoryAxis：

dataSource: ds, 
series: [{ 
    field: "data", 
    stack: true, 
}], 
categoryAxis: { 
    field: "stack", 
}, 

最后，您不应该将您的“数据”字段添加到系列阵列中阵列：

data: data[i].Items[j].Total 

dojo example