ASP.NET MVC中使用highcharts 生成简单的折线图
直接上步骤:
生成一个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