c# HighCharts使用
最近接到个图形报表的需求,网络上找了几个插件,最后决定用highcharts
需要的文件
1、bll文件,添加到项目引用 http://files.cnblogs.com/files/lovejunjuan/HighChartsMvc.Model.rar
2、js文件,在项目中添加引用 http://files.cnblogs.com/files/lovejunjuan/highcharts.js
引用bll文件
@using HighChartsMvc.Model.Chart;
@using HighChartsMvc.Model.Chart.SeriesStlye;
引用js文件
<script src="@Url.Content("~/Content/Highcharts-4.2.6/js/highcharts.js")" type="text/javascript"></script>
ajax从后台获取数据绑定到控件
$.ajax({
type: 'get',
url: durl,//请求数据的地址
success: function (data) {
var json = eval("(" + data + ")");
alert(json);
var s = 1;
for (var key in json.list) {
json.list[key].y = json.list[key].age; //给Y轴赋值
xtext = json.list[key].name;//给X轴TEXT赋值
json.list[key].color = color[key];
}
chart.series[0].setData(json.list);//数据填充到highcharts上面
},
error: function (e) {
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column' //显示类型 柱形,可修改为其他类型,饼图曲线图等,数据绑定方式都一样,非常方便
},
title: {
text: '产量分布图' //图表的标题
},
xAxis: {
categories: xtext
},
yAxis: {
title: {
text: '产量' //Y轴的名称
},
},
series: [{
name: "产量"
}]
});
json数据格式
public string DataTableToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
jsonBuilder.Append("list");
jsonBuilder.Append("\":["); for (int i = ; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = ; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":");
//jsonBuilder.Append("\":\"");
//判断下是否纯数字,highcharts插件不是纯数字的值要加双引号
if (IsNumber(dt.Rows[i][j].ToString()))
{
jsonBuilder.Append(dt.Rows[i][j].ToString());
}
else
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\"");
}
jsonBuilder.Append(",");
//jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - , );
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - , );
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
其他参数没有过多研究,可查看官网
c# HighCharts使用的更多相关文章
- Highcharts中国地图热力图
最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...
- Highcharts入门小示例
一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...
- Highcharts配置
一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...
- highcharts .net导出服务 和 两种导出方式
highcharts 的Net导出服务 GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...
- 《Learning Highcharts》中文翻译
在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...
- highcharts饼状图使用案例
在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...
- highcharts
preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...
- highcharts使用笔记
1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...
- FusionCharts和highcharts 饼图区别!
FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...
- .net 下新版highcharts本地导出图片bug处理
最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...
随机推荐
- MPI 并行奇偶交换排序 + 集合通信函数 Sendrecv() Sendvecv_replace()
▶ <并行程序设计导论>第三章的例子程序 ● 代码 #include <stdio.h> #include <mpi.h> #include <stdlib. ...
- python实现socket上传下载文件-进度条显示
在python的socket编程中,可以实现上传下载文件,并且在下载的时候,显示进度条,具体的流程如下图所示: 1. 服务器端代码如下: [root@python 519]# cat server.p ...
- Windows10 IME占用过高临时解决办法
解决方案: 在管理员模式下运行命令提示符,并输入如下命令 if exist "%SystemRoot%\System32\InputMethod\CHS\ChsIME.exe" ( ...
- Liunx cannot remove `xxx': Operation not permitted
链接: http://mangocool.com/detail_1_1439515930283.html 解到原来文件还可以设置隐藏权限,就是这个chattr设置,下面我们来看看这个命令的详解. [r ...
- notepad++正则表达式例子
1.匹配create table USR.APP ( 这样的字符串: create.*USR.APP\s+\(
- Android gralloc 模块实例
本文实例为借鉴 http://www.ixueyi.com/jingyan/1865079.html 该文档后所写.主要是android的gralloc操作显存的模块实例,如有不正确的地方欢迎指出谢谢 ...
- 一个简单的MVVM雏形
这是@尚春实现的MVVM,使用定时器轮询,只支持{{}}与input.value的修改. 这只能算是一个玩具,真正的MVVM需要有更复杂的扫描机制,JS解析器,双向绑定链什么的. <!DOCTY ...
- JS nodeJs 的日期计算
目录[-] date-utils Static Methods 静态方法 Instance Methods 接口方法 date-utils 前端引用 <script type="tex ...
- 2017面向对象程序设计(Java)第十五周学习总结
上周,老师要求同学们自学应用程序部署,并布置了相关的实验任务.此次实验的目的是掌握Java应用程序的打包操作:了解应用程序存储配置信息的两种方法: 了解Applet小应用程序的开发及应用方法:掌握基于 ...
- Ubuntu切换阿里源
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份 sudo vim /etc/apt/sources.list #修改 sudo ...