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
ASP.NET MVC中使用highcharts 生成简单的折线图的更多相关文章
- ASP.NET MVC 中的视图生成
关于 ASP.NET MVC 中的视图生成 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Mode ...
- 关于 ASP.NET MVC 中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...
- 关于ASP.NET MVC中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 ...
- ASP.NET MVC中权限控制的简单实现
1.重写AuthorizeAttribute类,用自己的权限控制逻辑重写AuthorizeCore方法 public class MyAuthorizeAttribute : AuthorizeAtt ...
- ASP.NET MVC中使用Ninject
ASP.NET MVC中使用Ninject 在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事 ...
- asp.net mvc 中 一种简单的 URL 重写
asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- ADO.NET .net core2.0添加json文件并转化成类注入控制器使用 简单了解 iTextSharp实现HTML to PDF ASP.NET MVC 中 Autofac依赖注入DI 控制反转IOC 了解一下 C# AutoMapper 了解一下
ADO.NET 一.ADO.NET概要 ADO.NET是.NET框架中的重要组件,主要用于完成C#应用程序访问数据库 二.ADO.NET的组成 ①System.Data → DataTable, ...
- 在Asp.Net MVC 中配置 Serilog
Serilog 是一种非常简便记录log 的处理方式,使用Serilog可以生成本地的text文件, 也可以通过 Seq 来在Web界面中查看具体的log内容. 接下来就简单的介绍一下在Asp.Net ...
随机推荐
- Linuxc:创建与监控多个子进程
#include <unistd.h> #include <sys/types.h> #include <stdlib.h> #include <signal ...
- HTTP中302与301的区别以及在ASP.NET中如何实现
一.官方说法301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Permanently Moved).302 re ...
- HTML页面实现返回顶部效果 go to top
1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(". ...
- 跨平台C的IDE
1.JetBrains的新跨平台C++ IDE,CLion已经开始EAP了,不过这货是收费的 http://confluence.jetbrains.com/display/CLION/Early+A ...
- OGG异常处理
ALTER REPLICAT LCMA1REP,BEGIN NOW 从最新的trail文件开始读取 ALTER REPLICAT LCMA1REP,EXTSEQNO 191(对应的 trail的序号 ...
- PAT A 1016. Phone Bills (25)【模拟】
题目:https://www.patest.cn/contests/pat-a-practise/1016 思路:用结构体存储,按照名字和日期排序,然后先判断是否有效,然后输出,时间加减直接暴力即可 ...
- hdu 4826(dp + 记忆化搜索)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4826 思路:dp[x][y][d]表示从方向到达点(x,y)所能得到的最大值,然后就是记忆化了. #i ...
- 将一个正整数分解为m个2的n次方的和
-- ============================================= -- Author: <maco_wang> -- Create date: & ...
- 各种编码问题产生原因以及解决办法---------响应编码,请求编码,URL编码
响应编码 产生原因以及解决办法: 示例: package cn.yzu; import java.io.IOException; import javax.servlet.ServletExcept ...
- AchartEngine的柱状图属性设置
1. 修改背景色或设置背景图片 背景色设置需要设置两项:setMarginsColor(设置四边颜色)以及setBackgroundColor(设置中间背景色) 设置背景图片: ...