Highcharts是一个制作图表的纯Javascript类库,主要特性如下:

  • 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;
  • 对个人用户完全免费;
  • 纯JS,无BS;
  • 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
  • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;
  • 提示功能:鼠标移动到图表的某一点上有提示信息;
  • 放大功能:选中图表部分放大,近距离观察图表;
  • 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
  • 时间轴:可以精确到毫秒

下载插件

Highcharts下载地址

http://www.highcharts.com/download

jquery下载地址

http://jquery.com/

1、需要引入的脚本

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/modules/exporting.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts-more.js" type="text/javascript"></script>

2、前端显示片段

        $('#canvasDiv').highcharts({
chart: {
type: '@Model[0].Type'
},
title: {
text: '@Model[0].Title'
},
subtitle: {
text: '@Model[0].Subtitle'
},
xAxis: {
categories: @Html.Raw(Model[0].XAxis.CategoriesJson)
},
yAxis: {
title: {
text: '@Model[0].YAxis.Title'
},
labels: {
formatter: function () {
return this.value + '次'
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: @Html.Raw(Model[0].SeriesJson)
});

3、控制器数据绑定片段

  

演示效果如下:

实现代码已全部开源

github:

https://github.com/cheng5x/YcHighCharts

oschina.net:

http://git.oschina.net/cheng5x/YcHighCharts

Highcharts图表.net版开源,支持webform 和 mvc3,完全开源的更多相关文章

  1. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

  2. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  3. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

  4. highcharts图表插件初探

    转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html HighCharts简介 Highcharts 是一个用纯JavaScrip ...

  5. Highcharts图表插件的简单使用说明

    Highcharts图表控件是眼下使用最为广泛的图表控件.本文将从零開始逐步为你介绍Highcharts图表控件. 通过本文.你将学会怎样配置Highcharts以及动态生成Highchart图表. ...

  6. highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明

    在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...

  7. 关于Highcharts图表组件动态修改属性的方法(API)总结之Series

    Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...

  8. highCharts图表应用-实现多种图表的显示

    在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...

  9. 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来

    1.准备工作:网上下载highcharts导出的关键dll.      1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图:      2).itextsha ...

随机推荐

  1. CoderForces 518C Anya and Smartphone (模拟)

    题意:给定一个手机,然后一共有 n 个app,告诉你每个屏幕最多放 k 个,现在要你运行 m 个app,每次都从第一个屏幕开始滑动,每运行一个,它就和前一个交换位置,第一个就不换了,现在问你要滑动多少 ...

  2. CMake使用技巧集

    1.注意CMake不允许出现相同的目标名称,即使是不同的目录下的CMakeLists.txt 2.将头文件搜索路径插入到其它的前面: include_directories(BEFORE /tmp) ...

  3. Transform动画初解 in Swift

    创建一个界面,就像这样的: 顶部是一个UISegmentControl,用来制定transform的类型.分别是:CGAffineTransformMakeTranslation.CGAffineTr ...

  4. 更改JupyterNotebook默认文件路径 行之有效!

    在安装了Anaconda以后浏览器默认打开的是C盘用户目录,平时不想把一些文件.代码放在C盘尤其是用户目录下,所以考虑将默认路径改掉,尝试了网上的几种方法,终于找到了一种可行有效的. 1.找到jupy ...

  5. WebApi 插件式构建方案:发现并加载程序集

    插件式的 WebApi 开发,首要面对的问题就是程序集的发现.因为开发的过程中,都是在各自的解决方案下进行开发,部署后是分模块放在一个整体的的运行时网站下. 约定 这里我根据上一节的设定,把插件打包完 ...

  6. .Net C# 阿拉伯数字转为中文金额数字

    一个练习,将阿拉伯数字转为中文金额数字,针对包含整数的金额有问题 代码: public string ReturnStr(string inputNum) { ", }; string[] ...

  7. python的print()输出

    1.普通的输出: print(str)#str是任意一个字符串,数字··· 2.格式化输出: print('1,2,%s,%d'%('asd',4)) 1,2,asd,4 与C语言有点类似 3.其它: ...

  8. WordPress插件Social Warfare<=3.5.2 无需登录RCE漏洞

    该漏洞只存在于Social Warfare插进的3.5.0.3.5.1和3.5.2版本中,其他版本不存在. 2019年3月21日插件作者紧急发布了3.5.3版本以修复高危的RCE漏洞,在<=3. ...

  9. 【QT】二进制读取图像文件并显示

    打开对话框选择文件 二进制方式读取文件 转换成图像显示 void MainWindow::showImage() { //打开文件对话框 QString lastPath="D:/Engli ...

  10. GO学习笔记 - 没有参数的 return 语句返回各个返回变量的当前值,这种用法被称作“裸”返回。

    Go 的返回值可以被命名,并且就像在函数体开头声明的变量那样使用. 返回值的名称应当具有一定的意义,可以作为文档使用. 没有参数的 return 语句返回各个返回变量的当前值.这种用法被称作“裸”返回 ...