如何在 kendo 图表 mvc 中对系列进行分类?
how to categories series in kendo chart mvc?
我有一张图表,
图表的目的是男性和女性的总数,基于国家和国籍。成功生成图表
这是我创建的 fiddle。
如何对系列标签进行分类。
我正在尝试定位类似这样的系列名称..建议我如何生成
已尝试示例 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 #")
)
)
终于找到了解决办法
$("#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" }
}
]
});
我有一张图表,
图表的目的是男性和女性的总数,基于国家和国籍。成功生成图表
这是我创建的 fiddle。
如何对系列标签进行分类。
我正在尝试定位类似这样的系列名称..建议我如何生成
已尝试示例 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 #")
)
)
终于找到了解决办法
$("#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" }
}
]
});