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 ...
随机推荐
- python基础——模块
python基础——模块 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文 ...
- bootstrap垂直下拉菜单默认展开
HTML: <div class="col-md-3"> <nav class="navbar"> <div class=&quo ...
- Java遍历List的时候删除item
参考:http://blog.csdn.net/longyulu/article/details/8315068 在Java中有时候我们会需要对List里面的符合某种业务的数据进行删除,但是如果不了解 ...
- php 复习
<?php 一.php基础语法1.输出语句:echo print print_r var_dump() 2.php是弱类型语言强制转换类型: (类型)变量 settype(变量,类型) 3.变量 ...
- php 投票系统练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SQLSERVER查询连接数
SELECT * FROM [Master].[dbo].[SYSPROCESSES] WHERE [DBID] IN (SELECT [DBID]FROM [Master].[dbo].[SYSDA ...
- Tensorflow 的Word2vec demo解析
简单demo的代码路径在tensorflow\tensorflow\g3doc\tutorials\word2vec\word2vec_basic.py Sikp gram方式的model思路 htt ...
- HTML5学习之画布和SVG(四)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- HTTPCLIENT 学习 (1) 入门
早就如雷贯耳它的大名,却一直不曾相见,昨天下载下来,今天终于测试了一把,用的官网的QUICK START例子,来访问我自己以前开发过的WEB程序,因为这个网站恰好有一个写好的通过POST请求验证用户名 ...
- MS SQL数据批量备份还原(适用于MS SQL 2005+) 分类: SQL Server 数据库 2015-03-10 14:32 103人阅读 评论(0) 收藏
我们知道通过Sql代理,可以实现数据库的定时备份功能:当数据库里的数据库很多时,备份一个数据库需要建立对应的定时作业,相对来说比较麻烦: 还好,微软自带的osql工具,比较实用,通过在命令行里里输入命 ...