.net图表制作（highcharts）

最新推荐文章于 2019-03-09 20:47:49 发布
最新推荐文章于 2019-03-09 20:47:49 发布
阅读量89 收藏
点赞数
原文链接：http://www.cnblogs.com/wangzhenghua/articles/4485765.html
版权

首先，下载highcharts js包文件，引入：

    <script type="text/javascript" src="js/jquery.1.9.1.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/modules/exporting.js"></script>

例子：

 <script type="text/javascript">
        $(document).ready(function () {
         
          
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',//放置图标的容器
                    type: 'scatter',
                    //line 折线图 area 区域图  'column' 柱状图 bar条形图 scatter散列图 'bubble'气泡图
                     marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                //X 轴
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
			'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                //Y轴
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {    
                    formatter: function () {
                    当鼠标悬置数据点时的格式化提示
                 
                        return '<b>' + this.series.name + '</b><br/>' +
				this.x + ': ' + this.y + '°C';
                    }
                },
                 //划分选项
                plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true,
                        style: {
                            textShadow: '0 0 3px white, 0 0 3px white'
                        }
                    },
                    enableMouseTracking: false
                }
            },

                legend: {
                    layout: 'vertical',//显示样式，垂直或者水平
                    align: 'right',
                    verticalAlign: 'top',//默认为底部
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series:<%=xx %>
            });
        });
    </script>

　　其中series对应的是数据部分，这一部分我可以通过对数据库的处理分析得到。其实就是得到一个json字符串。

    protected string xx = " [{ name: 'Tokyo',data: [30.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, {name: 'New York',data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }]";

　　下面是另外一个例子柱状、曲线、饼图组合图，取自Highcharts配置手册。

效果图：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Chart.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery.1.9.1.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
            },
            title: {
                text: 'Combination chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
            },
            tooltip: {
                formatter: function () {
                    var s;
                    if (this.point.name) { // the pie chart
                        s = '' +
                            this.point.name + ': ' + this.y + ' fruits';
                    } else {
                        s = '' +
                            this.x + ': ' + this.y;
                    }
                    return s;
                }
            },
            labels: {
                items: [{
                    html: 'Total fruit consumption',
                    style: {
                        left: '40px',
                        top: '8px',
                        color: 'black'
                    }
                }]
            },
            series: [{
                type: 'column',
                name: 'Jane',
                data: [3, 2, 1, 3, 4]
            }, {
                type: 'column',
                name: 'John',
                data: [2, 3, 5, 7, 6]
            }, {
                type: 'column',
                name: 'Joe',
                data: [4, 3, 3, 9, 0]
            }, {
                type: 'spline',
                name: 'Average',
                data: [3, 2.67, 3, 6.33, 3.33],
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
            }, {
                type: 'pie',
                name: 'Total consumption',
                data: [{
                    name: 'Jane',
                    y: 13,
                    color: Highcharts.getOptions().colors[0] // Jane's color
                }, {
                    name: 'John',
                    y: 23,
                    color: Highcharts.getOptions().colors[1] // John's color
                }, {
                    name: 'Joe',
                    y: 19,
                    color: Highcharts.getOptions().colors[2] // Joe's color
                }],
                center: [100, 80],
                size: 100,
                showInLegend: false,
                dataLabels: {
                    enabled: false
                }
            }]
        });
    });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </div>
    </form>
</body>
</html>

　　

 

转载于:https://www.cnblogs.com/wangzhenghua/articles/4485765.html

weixin_34018169
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
highcharts 导出图片 .net c#Demo例子
04-20
highcharts 导出图片 .net c#Demo例子
ASP.NET中实时图表的实现
Alinker
12-30 1211
         在对大批量的数据进行分析比较时，最常用也是最直观明了的表现方法莫过于绘制趋势图表。一般情况下，我们利用EXCEL制作各种类型的趋势图表，但它们都是基于静态数据的，即数据是事先整理好的而不 是动态生成的。如果在网上发布，只能将绘制好的图表以静态GIF图像发布，这无法从根本上满足不同用户对不同数据的需求。 ASP擅长服务器端的Web编程，操作后台数据库更是它的强项
在.NET中使用highcharts实例代码
weixin_33928467的博客
12-16 76
<%@ Page Language="C#" MasterPageFile="~/test/test.master" AutoEventWireup="true" CodeFile="highcharts.aspx.cs" Inherits="test_highcharts" Title="" %><asp:Content ID="Content1" ContentP...
在.NET中使用highcharts的配置实例
最后一个BUG留给我
06-02 343
Highcharts Example---基本的曲线图                                                                                    var chart;             $(document).ready(function() {                 chart = new Highcha
ASP.NET Highcharts图表(1)-环境配置及第一个实例
程序员大阳
04-29 2623
一，简介ASP.NET图表实现无非两个大方向：基于后端、基于前端。所谓基于后端，可以是控件库，一般比较重量级，而且侵入感比较强，可移植性差（.Net Framework版本间移植、.Net与JSP、PHP间移植）。所以还是基于前端好，侵入感比较低（反正都得用前端），可移植性好（前后端分离）。本篇就是介绍一个非常好用的，完全基于前端Javascript的图表库，注意该库对个人、非商业用途是免费的，而且
浅析jquery的js图表组件highcharts
12-11
Highcharts是一个制作图表的纯Javascript类库，　主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；对于非商用用户免费（包括个人网站、非盈利性组织、学生团体等）。纯JS，无BS；支持大...
Highcharts图表库-其他
06-12
Highcharts是一个制作图表的纯Javascript类库。Highcharts主要特性：1、兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；2、对个人用户完全免费；3、纯JS，无BS；4、支持大部分的图表类型：直线图，曲线图...
YcHighCharts:Highcharts是一个制作图表的纯Javascript类库，自主封装.net图表框架，支持webform和mvc3以上
05-17
`YcHighCharts` 是一个基于 `Highcharts` 的 .NET 图表框架，由元创商业科技（深圳）公司开发并提供。这个框架是为了解决在 .NET 开发环境中，尤其是WebForm和MVC3及以上版本，快速、高效地创建高质量图表的需求。`...
.NET图表图形
12-25
下面将详细探讨.NET图表图形的相关知识点。 1. **.NET Framework中的图表控件**： .NET Framework自带了一个名为`System.Windows.Forms.DataVisualization.Charting`的命名空间，它提供了一个强大的图表控件，可以...
ASP.NET动态绑定HighCharts图表控件
呆瓜丶的菜鸟技术分享
12-29 1185
前台代码： var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: '
最牛统计图控件 Highcharts Asp.net
12-24
最牛统计图控件 Highcharts Asp.net 已经完成测试，是做统计图效果的极佳选择 Jquery Highcharts Asp.net 开发代码
highcharts 导出图片 例子 .net C# Demo
07-29
HighCharts导出图片是发现请求的是官网，于是找了一下，整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharpPDF.dll) (Svg.dll) 源码也怎和在一起了，有兴趣可以看看；） 找过其他的导出的，图片都不清晰，这个清晰度很和官网导出的一样；有点区别是 官网导出pdf中是svg图片，这个jpg图片；其他png,jpg，svg都和清晰
ASP.NET动态生成图表范例
12-13
ASP.NET动态生成图表范例 语言c#
ASP.NET 图表制作 参考
sky1069的专栏
07-17 851
http://blog.csdn.net/yx017893/article/details/6330227http://www.cnblogs.com/fhmsha/archive/2008/11/26/new_asp_dot_net_chart_is_released.html
highcharts一个charts加载多个id，循环charts并动态加载series数据
Super Livia
03-09 1897
PS：因為在工作中經常會用的這個插件，所以做個日常歸納方便自己查閱，也幫助大家更快速的解決關於這個插件的各種問題和需要的樣式，希望也能幫助大家，謝謝，如有雷同純屬巧合，慢慢完善中。 因为公司需求要在一个页面加载多个图表，如果一个id写一个图表的话，不知道要写多少代码，所以就开始简化代码之路；而且series里面的数据需要动态加载，我也不知道会加载多少数据，所以，能简化就简化吧，在此给大家分享一下...
在ASP.NET中使用Highcharts js图表
热门推荐
周公（周金桥）的专栏
04-07 1万+
从事过ASP.NET开发的可能都会接触到一些图表控件，比如OWC、ZendGraph等等，这些控件都有一个特点，那就是我们可以像操作.NET中的对象一样控制它们的某些属性，有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件，不要小看了这个JavaScript图表控件，它能生成各种常见的图表。Highcharts是一个JavaScript的图表控件，它的官方网站网址是：http://www.highcharts.com/，参考手册网
聊天室、websocket、socket.io、毕业设计.zip
最新发布
07-27
聊天室、websocket、socket.io、毕业设计.zip
Highcharts图表控件详细使用教程
在ASP.NET和C#环境中，Highcharts可以通过引入相关的JS库来实现图表的创建和展示。 首先，使用Highcharts需要引入jQuery库和Highcharts的核心库。这两个JavaScript文件分别负责基础的DOM操作和图表的生成。如果需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值