如何在 kendo 图表 mvc 中对系列进行分类?

how to categories series in kendo chart mvc?

我有一张图表,

图表的目的是男性和女性的总数,基于国家和国籍。成功生成图表

这是我创建的 fiddle。

jsFiddle example供参考

如何对系列标签进行分类。

我正在尝试定位类似这样的系列名称..建议我如何生成

已尝试示例 Razor 代码

  @(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 #")
    )
    )

终于找到了解决办法

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" }
  }
                ]
});