kendo column chart

 目录

1、用js操作chart，

2、tooltip template鼠标悬浮显示内容，

3、双坐标轴，axisCrossingValues: [0, 30]，3指的是跨越横坐标轴标签项数，显示在右侧

4标签永远在下边，categoryaxis里多加个series-axis，valueAxes里加个 axisCrossingValue: [0, @int.MinValue]

5、更新数据

6、全部代码

7、图中只有一种柱，统一设置颜色，用.Column().Color("#5EB6E4")

@(Html.Kendo().Chart<ChartSeriesModel>()
.Name("equipmentChart")
.Title(Resources.RegionEquipmentReportMachineTotal)
.Legend(legend => legend.Visible(false))
.DataSource(ds => ds.Read(read => read.Action("GetEquipmentTotalData", "ReportManage")))
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column().Color("#5EB6E4")
)
.Series(series => series.Column(model => model.Value,null, model => model.Category, null))
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)

 

1、用js操作chart，

2、tooltip template鼠标悬浮显示内容，

3、双坐标轴，axisCrossingValues: [0, 30]，3指的是跨越横坐标轴标签项数，显示在右侧

4标签永远在下边，categoryaxis里多加个series-axis，valueAxes里加个 axisCrossingValue: [0, @int.MinValue]

categoryAxis: [{
line: {
visible: false
},
name: 'series-axis',
axisCrossingValues: [0, 30]
}, {
line: {
visible: false
},
categories: otherCategoryData,
name: 'label-axis',
axisCrossingValues: [0, 30]
}
],

5、更新数据

$("#chartType").data("kendoChart").options.series[0].data = [
{
category: "500万元以下",
value: firstLayerAmount,
color: "#CCFFCC"
}, {
category: "500-1000万元",
value: secondLayerAmount,
color: "#99CCCC"
}, {
category: "1000-2000万元",
value: thirdLayerAmount,
color: "#9999CC"
}, {
category: "2000-5000万元",
value: fourthLayerAmount,
color: "#CC99CC"
}
];
$("#chartType").data("kendoChart").refresh();

6、全部代码

$("#otherChart").kendoChart({
title: {
text: verticleCompareField + "利润总额其他方面分布图"
},
legend: {
position: "top"
},
tooltip: {
visible: true,
template: '#= series.name #: #= value #'
},
series: [
{
name: "利润总额",
type: "column",
data: otherAmountData,
axis: "amount"
},
{
name: "企业数量",
type: "column",
data: otherCountData,
axis: "companyCount"
}
],
valueAxes: [
{
title: { text: "万元" },
name: "amount",
color: "#ff6800",
axisCrossingValue: [0, @int.MinValue]
}, {
name: "companyCount",
title: { text: "家" },
color: "#a0a700",
axisCrossingValue: [0, @int.MinValue]
}
],
categoryAxis: [{
line: {
visible: false
},
name: 'series-axis',
axisCrossingValues: [0, 30]
}, {
line: {
visible: false
},
categories: otherCategoryData,
name: 'label-axis',
axisCrossingValues: [0, 30]
}
],
pannable: {
lock: "y"
},
zoomable: {
mousewheel: {
lock: "y"
},
selection: {
lock: "y"
}
}
});
}
};