劍道堆積條形圖類別

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