2016-07-19 14 views
0

У меня есть график,как к категориям серии в кенд-карте mvc?

Цель графика будет говорить всего мужского & женского пола, на основе страны & национальности мудрая. Успешно сформировать диаграмму

Вот скрипка, я создал.

jsFiddle example Для справки

Как к категории лэйбл серии.

Я пытаюсь поместить название серии подобное, как это .. Предложите мне, как я могу генерировать

enter image description here

Sample Бритва код попытался

@(Html.Kendo().Chart() 
    .Name("chart") 
    .Title("Gender Summay based on the total") 
    .Legend(legend => legend 
     .Position(ChartLegendPosition.Bottom) 
    ) 
    .Series(series => 
    { 
     series.Column(new double[] { 54, 5 }).Name("2010 Bah") 
     .Labels(labels => 
     labels.Template("#= series.name #")   
     .Background("transparent") 
     .Visible(true)); 
     series.Column(new double[] { 24, 21 }).Name("2010 Non Bah").Labels(labels => 
     labels.Template("#= series.name #") 
     .Background("transparent") 
     .Visible(true)); 

     series.Column(new double[] { 54, 5 }).Name("2011 Bah").Labels(labels => 
     labels.Template("#= series.name #") 
     .Background("transparent") 
     .Visible(true)); 

     series.Column(new double[] { 24, 21 }).Name("2011 Non Bah") 
     .Labels(labels => 
     labels.Template("#= series.name #")    
     .Background("transparent") 
     .Visible(true)); 

     series.Column(new double[] { 10, 52 }).Name("2012 Bah") 
     .Labels(labels => 
     labels.Template("#= series.name #") 
     .Background("transparent") 
     .Visible(true)); 

     series.Column(new double[] { 12, 65 }).Name("2012 Non Bah") 
     .Labels(labels => 
     labels.Template("#= series.name #") 
     .Background("transparent") 
     .Visible(true)); 
    }) 
    .CategoryAxis(axis => axis 
     .Categories("Male", "FeMale") 

     .Justify(true) 
    ) 

    .Tooltip(tooltip => tooltip 
     .Visible(true) 
     .Format("{0}") 
     .Template("#= series.name # : #= value #") 
    ) 
    ) 

ответ

0

Наконец много борьбы , я нашел решение

jsbin working example

$("#chart").kendoChart({ 
    seriesDefaults: { 
    type: "column" 
    }, 
    series: [{ 
    name: "Sales", 
    data: [10, 20, 0.5, 0, 100, 0] 
    }], 
    valueAxis: [{ 
    majorGridLines: { visible: false }, 
    title: { text: "Sales" }, 
    axisCrossingValue: [0,0] 
    }], 
    categoryAxis: [{ 
    categories: ["Order", "Invoice", "Credit Memo", "Order", "Invoice", "Credit Memo"], 
    majorGridLines: { visible: false } 
    }, 
       { 
    categories: ["Item", "Resources"], 
    line: { visible: true }, 
    majorGridLines: { visible: true }, 
    title: { text: "Type & Document Type" } 
    } 
       ] 
});