最近接到个图形报表的需求,网络上找了几个插件,最后决定用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使用的更多相关文章

  1. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  2. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  3. Highcharts配置

    一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...

  4. highcharts .net导出服务 和 两种导出方式

    highcharts 的Net导出服务  GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...

  5. 《Learning Highcharts》中文翻译

    在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...

  6. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  7. highcharts

    preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...

  8. highcharts使用笔记

    1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...

  9. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  10. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

随机推荐

  1. 《Linux内核精髓:精通Linux内核必会的75个绝技》一HACK #6 使用localmodconfig缩短编译时间

    HACK #6 使用localmodconfig缩短编译时间 本节介绍使用make localmodconfig生成精简的.config文件,缩短内核编译时间的方法.为了能够应对各种各样的环境,发布版 ...

  2. 检测Python程序的执行效率

    无意中被问到代码执行效率的问题,那就总结一下检测代码执行效率的几种方式: 一.装饰器 在函数上加装饰器,来得到函数的执行时间. def cst_time(func, *args, **kwargs): ...

  3. 超文本传输协议http详解

    HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第 ...

  4. oracle账户密码更新

    oracle忘记用户名密码怎样恢复 首先cmd - sqlplusw 普通用户登陆:用户名:scott(普通用户名)      密码:tiger(普通用户密码) 管理员登陆:用户名:system 密码 ...

  5. Rhythmk 学习 Hibernate 03 - Hibernate 之 延时加载 以及 ID 生成策略

    Hibernate 加载数据 有get,跟Load 1.懒加载: 使用session.load(type,id)获取对象,并不读取数据库,只有在使用返回对象值才正真去查询数据库. @Test publ ...

  6. MySQL 触发器示例

    简介: MySQL 触发器 这次实验是在一台 MySQL Slave 上进行的,事实证明:从库添加数据库.表.插入.删除数据等,不会导致主从失败. 一.创建实验数据库.表 mysql > cre ...

  7. 7.25 9figting!

    TEXT 87 Fund management基金管理   A Miller's tale 米勒传奇(陈继龙编译) Dec 7th 2006 From The Economist print edit ...

  8. ArcGIS帮助文档VS帮助文档不能复制图片的解决方法

    ArcGIS帮助文档VS帮助文档不能复制图片的解决方法(非常有用)   问题:ArcGIS的学习文档,开发文档,vs的帮助文档,一般都不能复制图片,有的甚至不能复制文本.   解决方法 在文档空白处右 ...

  9. centos禁止 You have new mail in /var/spool/mail/root提示

    在/etc/profile 增加unset MAILCHECK

  10. kubenetes GPU

    https://kubernetes.io/docs/tasks/manage-gpus/scheduling-gpus/#deploying-nvidia-gpu-device-plugin 1. ...