直接上步骤:
生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等;
配置X轴显示的Category数据,为一个数组;
配置Y轴显示的数据,也为一个数据;
用生成option构建一个Hightcharts对象,即可以自动画出一个折线图了;
1.配置BundleConfig
-
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js", "~/Scripts/jquery.metadata.js"));
-
bundles.Add(new ScriptBundle("~/bundles/highcharts").Include("~/Scripts/hightcharts/highcharts-custom.js"));
2.视图模板
-
@Scripts.Render("~/bundles/highcharts")
-
-
<script type="text/javascript">
-
$(function () {
-
var option = option = getOption("container", '@ViewBag.titletext');
-
//生成两个serial
-
option.xAxis.categories = @Html.Raw(@ViewBag.categories)
-
option.series[0].data = @ViewBag.amount
-
option.series[1].data = @ViewBag.quantity
-
option.subtitle.text = '@ViewBag.subtitle'
-
-
chart = new Highcharts.Chart(option);
-
-
$("text:contains('销售数量')").trigger('click');
-
});
-
-
function getOption(container, title) {
-
var options = {
-
chart: {
-
renderTo: container,
-
type: 'line'
-
},
-
title: {
-
text: title
-
},
-
subtitle: {
-
text: 'imc'
-
},
-
xAxis: {
-
title: {
-
text: '日期'
-
}
-
},
-
yAxis: {
-
title: {
-
text: '数量或金额'
-
},
-
min: 0, // 定义最小值
-
},
-
plotOptions: {
-
line: {
-
dataLabels: {
-
enabled: true
-
}
-
}
-
},
-
tooltip: {
-
shared: true, //共享数据提示框
-
},
-
credits: {
-
enabled: false
-
},
-
series: [{
-
name: "销售金额"
-
}, {
-
name: "销售数量"
-
}]
-
}
-
-
return options;
-
}
-
-
</script>
3.后台代码
-
categories = "['" + string.Join("','", list.Select(zw => zw.DTStr)) + "']";
-
quantity = "[" + string.Join(",", list.Select(zw => zw.Quantity)) + "]";
-
amount = "[" + string.Join(",", list.Select(zw => zw.Amount)) + "]";
-
-
ViewBag.titletext = title;
-
ViewBag.categories = categories;
-
ViewBag.quantity = quantity;
-
ViewBag.amount = amount;
-
ViewBag.subtitle = subtitle;
4.效果图
5.参考资料
中文教程与资料:http://www.hcharts.cn/docs/index.php?doc=basic-axis
示例:http://www.cnblogs.com/TivonStone/p/3539766.html
更多的charts插件:http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html