highcharts使用示例

最新推荐文章于 2020-01-04 11:11:12 发布
最新推荐文章于 2020-01-04 11:11:12 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： ASP.NET 文章标签： highcharts 使用示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengshi_sh/article/details/11530735
版权
1、前台：
     < div  id ="container"  style =" min-width  :  220px ;  min-height :  300px  ;  margin :  0  auto"></  div >
    < script  src ="script/jquery-1.7.2.min.js"  type  ="text/javascript"></  script >
     < script  src ="script/highcharts/highcharts.js"  type  ="text/javascript"></  script >
     < script  src ="script/highcharts/modules/exporting.js"  type  ="text/javascript"></  script >
     < script  type ="text/javascript">
        $(  function () {
             var  analystId=$( "#analystID"  ).val();
             var  month=3;
                $.ajax({
                    url:  "/highchartsTable.ashx?id="  + analystId + "&month="  +month ,
                    type:  "POST" ,
                    dataType:  "json" ,
                     //cache: false,
                    success:  function (json) {
                        var  aryMonths =  new  Array( "Jan" ,  "Feb" ,  "Mar"  ,  "Apr" ,  "May" ,  "Jun"  ,  "Jul"  , "Aug" ,  "Sep"  ,  "Oct"  ,  "Nov" ,  "Dec" );
                        var  now =  new  Date();
                        var  nowMonth = now.getMonth();
                        var  lastYear=now.getFullYear()-1;
                        var  arrTemp= new  Array(month);
                        for  ( var  i = month-1; i >=0; i--) {
                             if (i < nowMonth){
                                arrTemp[month-i-1] = aryMonths[nowMonth-i-1];
                            }
                             else  if  (i==nowMonth){
                                arrTemp[0] = aryMonths[nowMonth] +  "<br/>(" +lastYear+ ")"  ;
                            }
                             else  if  (i > nowMonth){
                                arrTemp[i-nowMonth] = aryMonths[i] +  "<br/>(" +lastYear+ ")"  ;
                            }
                        }
                        $(  '#container' ).highcharts({
                            chart: {
                                type:  'column'
                            },
                            legend:{
                                layout:  "horizontal" ,
                                floating:  false
                            },
                            title: {
                                text:  'Analyst investment<br/> profit/loss statistics '  ,
                                y:10
                            },
                            subtitle: {
                                text:  'Source: www.highcharts.com' ,
                                y:50
                            },
                            xAxis: {
                            
                                categories:arrTemp
//                                [
//                                'Jan',
//                                'Feb',
//                                'Mar',
//                                'Apr',
//                                'May',
//                                'Jun',
//                                'Jul',
//                                'Aug',
//                                'Sep',
//                                'Oct',
//                                'Nov',
//                                'Dec'
//                                ]
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text:  'Amount($)'
                                }
                            },
                            tooltip: {
                                headerFormat:  '<span style="font-size:10px">{point.key}</span><br /><table>' ,
                                pointFormat:  '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'  +
                                 '<td style="padding:0"><b>{point.y:.1f} $</b></td></tr>'  ,
                                footerFormat:  '</table>' ,
                                shared:  true ,
                                useHTML:  true
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series:json,
                        });
                    },
                });
            })
   


     </ script >
       


2、后台：
     ///  <sumMonth3y>
     ///  $codebehindclassname$  的摘要说明
     ///  </sumMonth3y>
    [  WebService (Namespace =  "http://tempuri.org/"  )]
    [  WebServiceBinding (ConformsTo =  WsiProfiles  .BasicProfile1_1)]
     public  class  highchartsTable  :  IHttpHandler ,  IRequiresSessionState
    {
         private  static  StrategyBiz  biz =  new  StrategyBiz  ();
         public  void  ProcessRequest( HttpContext  context)
        {
            context.Response.ContentType =  "text/plain" ;
             string  responseJson =  null  ;
             string  analystId = context.Request.QueryString[ "id" ];
             string  month = context.Request.QueryString[ "month" ];
             if  (! string  .IsNullOrEmpty(analystId) && !  string .IsNullOrEmpty(month))
            {
                responseJson = InvestTableJson(  Convert .ToInt32(analystId),  Convert .ToInt32(month));
            }
            context.Response.Write(responseJson);
        }

         public  bool  IsReusable
        {
             get
            {
                 return  false  ;
            }
        }

         ///  <sumMonth3y>
         ///  判断输入是否为整数类型
         ///  </sumMonth3y>
         ///  <param name="s">  待检查数据  </param>
         ///  <returns></returns>
         public  static  bool  IsInt(  string  s)
        {
             if  (s ==  null  )
            {
                 return  false  ;
            }
             else
            {
                 try
                {
                     int  i =  int  .Parse(s);
                     return  true  ;
                }
                 catch
                {
                     return  false  ;
                }
            }
        }


         ///  <sumMonth3y>
         ///  InvestTable 获取数据
         ///  </sumMonth3y>
         public  string  InvestTableJson( int  analystID,  int  months)
        {
             string  json =  null  ;
             try
            {
                 int  nowMonth =  DateTime  .Now.Month;
                 AnalystInvestBiz  biz =  new  AnalystInvestBiz ();
                 IList < StrategyInvest  >[] invesListTemp =  new  List < StrategyInvest  >[months];
                 int [] amountTemp =  new  int [months];
                 IList < StrategyInvest  > invesList = biz.GetAllInvestByAnalystID(analystID, months); // 近 months  个月的数据
                 IList < StrategyInvest  > typeList = biz.GetAllInvestTypeByAnalystID(analystID);  // 找到该分析师下的所有显示投资商品
                 List < InvestTable  > investData =  new  List < InvestTable  >();

                 if  (typeList.Count > 0)
                {
                     for  ( int  j = 0; j < typeList.Count; j++)
                    {
                         InvestTable  itab =  new  InvestTable ();
                         yearData  yearDataTemp =  new  yearData ();
                         for  ( int  i = months; i > 0; i--)
                        {
                            invesListTemp[i - 1] = invesList.Where(c => c.InvestTime >=  DateTime .Now.AddMonths(-i-1) && c.InvestTime <  DateTime .Now.AddMonths(-i)).ToList();
                            amountTemp[i-1] = invesListTemp[i - 1].Count == 0 ? 0 : (invesListTemp[i - 1].Where(c => c.InvestProduct == typeList[j].InvestProduct).ToList().Count != 0 ? invesListTemp[i - 1].Where(c => c.InvestProduct == typeList[j].InvestProduct).First().AmountProfit : 0);
                             int  m = invesListTemp[i - 1].Count == 0 ? 0 : (invesListTemp[i - 1].Where(c => c.InvestProduct == typeList[j].InvestProduct).ToList().Count != 0 ? invesListTemp[i - 1].Where(c => c.InvestProduct == typeList[j].InvestProduct).First().InvestTime.Month : 0);
                             if  (m ==  DateTime  .Now.AddMonths(-months).Month)
                            {
                                yearDataTemp.Month1 = amountTemp[i - 1].ToString();
                            }
                             else  if  (m ==  DateTime .Now.AddMonths(-(months-1)).Month)
                            {
                                yearDataTemp.Month2 = amountTemp[i - 1].ToString();
                            }
                             else  if  (m ==  DateTime .Now.AddMonths(-(months - 2)).Month)
                            {
                                yearDataTemp.Month3 = amountTemp[i - 1].ToString();
                            }
                             //else if (m == DateTime.Now.AddMonths(-(months - 3)).Month)
                             //{
                             //    yearDataTemp.Month4 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 4)).Month)
                             //{
                             //    yearDataTemp.Month5 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 5)).Month)
                             //{
                             //    yearDataTemp.Month6 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 6)).Month)
                             //{
                             //    yearDataTemp.Month7 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 7)).Month)
                             //{
                             //    yearDataTemp.Month8 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 8)).Month)
                             //{
                             //    yearDataTemp.Month9 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 9)).Month)
                             //{
                             //    yearDataTemp.Month910 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 10)).Month)
                             //{
                             //    yearDataTemp.Month911 = amountTemp[i - 1].ToString();
                             //}
                             //else if (m == DateTime.Now.AddMonths(-(months - 11)).Month)
                             //{
                             //    yearDataTemp.Month912 = amountTemp[i - 1].ToString();
                             //}
                        }
                        itab.yearInvest = yearDataTemp;
                        itab.InvestProduct = typeList[j].InvestProduct;
                         int  dataCount = investData.Count;
                        investData.Insert(dataCount, itab);
                    }
                }
                json = JSON<  InvestTable >(investData);
            }
             catch  ( ArgumentNullException  e)
            {
                 throw  new  Exception (e.Message);
            }
             return  json;
        }

         public  class  InvestTable
        {
             ///  <sumMonth3y>
             ///  投资商品
             ///  </sumMonth3y>
             public  string  InvestProduct {  get ;  set ; }
             ///  <sumMonth3y>
             ///  一年的数据
             ///  </sumMonth3y>
             public  yearData  yearInvest {  get ;  set ; }
        }

         public  class  yearData
        {
             public  string  Month1 {  get ;  set ; }
             public  string  Month2 {  get ;  set ; }
             public  string  Month3 {  get ;  set ; }
             //public string Month4 { get; set; }
             //public string Month5 { get; set; }
             //public string Month6 { get; set; }
             //public string Month7 { get; set; }
             //public string Month8 { get; set; }
             //public string Month9 { get; set; }
             //public string Month910 { get; set; }
             //public string Month911 { get; set; }
             //public string Month912 { get; set; }
        }

         ///  <sumMonth3y>
         ///  转换  List <T> 的数据为  JSON 格式
         ///  </sumMonth3y>
         ///  <typeparam name="T">  类 </typeparam>
         ///  <param name="vals">  列表值 </param>
         ///  <returns>  JSON 格式数据 </returns>
         public  static  string  JSON<T>(  List <T> vals)
        {
             string  ResStr =  string  .Empty;
             StringBuilder  st =  new  StringBuilder ();
             try
            {
                 DataContractJsonSerializer  s =  new  DataContractJsonSerializer  ( typeof (T));
                 foreach  (T city  in  vals)
                {
                     using  ( MemoryStream  ms =  new  MemoryStream ())
                    {
                        s.WriteObject(ms, city);
                        st.Append(System.Text.  Encoding .UTF8.GetString(ms.ToArray()) +  "," );
                    }
                }
               
                ResStr = st.ToString();
                 if  (ResStr !=  ""  )
                {
                    ResStr = ResStr.Substring(0, ResStr.Length - 1);
                    ResStr = ResStr.Replace(  "\"" ,  ""  ).Replace( ":{" ,  ":[" ).Replace( "}}"  ,  "]}"  ).Replace( "InvestProduct" ,  "\"name\""  ).Replace( "yearInvest" ,  "\"data\""  ).Replace( "\"name\":" , "\"name\":\""  ).Replace( ",\"data\"" , "\",\"data\""  )
                        .Replace(  "Month1:" ,  ""  ).Replace( "Month2:" ,  "" ).Replace( "Month3:"  ,  ""  ).Replace( "Month4:" ,  "" ).Replace( "Month5:"  ,  "" ).Replace(  "Month6:" ,  ""  ).Replace( "Month7:" ,  ""  ).Replace( "Month8:" ,  "" ).Replace( "Month9:"  ,  "" ).Replace(  "Month910:" ,  ""  ).Replace( "Month911:" ,  ""  ).Replace( "Month912:" ,  "" ).Replace( "null"  ,  "0" );
                    ResStr =  "["  + ResStr +  "]"  ;
                }
            }
             catch  ( Exception  ex)
            {
                 throw  ex;
            }
             return  ResStr;
        }
    }


3、数据处理层

          public  const  String  CSP_STRATEGY_INVEST_ALL_BY_ANALYSTID =  "SELECT [ID],[AnalystID],[InvestProduct],[InvestType],[AmountProfit],[InvestTime],[IsDisplay],[AddTime],[Status] FROM M_T_STRATEGY_INVEST where Status > 0 and AnalystID=@AnalystID and (datediff(month,InvestTime,getdate())>=0 and datediff(month,InvestTime,getdate())<=@month) order by id desc" ;
         // 通过分析师 ID 查找其几个月所有投资记录
         public  IList  < StrategyInvest > GetAllInvestByAnalystID(  int  analystID, int  month)
        {
             List < StrategyInvest  > list =  new  List < StrategyInvest  >();
             IDataReader  reader =  null  ;
             IDataParameter [] parameters = 
            {  
                Helper.GetParameter(  "@AnalystID" ,  DbType  .Int32, analystID) ,
                Helper.GetParameter(  "@month" ,  DbType  .Int32, month)
            };
             try
            {
                reader = Helper.ExecuteReader(
                    ConnectionString,
                     CommandType .Text,
                    CSP_STRATEGY_INVEST_ALL_BY_ANALYSTID,
                    parameters);
                 while  (reader.Read())
                {
                     StrategyInvest  si =  new  StrategyInvest ();
                    si.ID =  Int32 .Parse(reader[ "ID"  ].ToString());
                    si.AnalystID =  Int32 .Parse(reader[ "AnalystID"  ].ToString());
                    si.InvestProduct = reader[  "InvestProduct"  ].ToString();
                    si.InvestType = reader[  "InvestType" ].ToString();
                    si.AmountProfit =  Convert .ToInt32(reader[ "AmountProfit"  ]);
                    si.InvestTime =  Convert .ToDateTime(reader[ "InvestTime"  ].ToString());
                    si.IsDisplay =  Convert .ToBoolean(reader[ "IsDisplay"  ]);
                    si.Status =  Convert .ToInt32(reader[ "Status"  ]);
                    si.AddTime =  Convert .ToDateTime(reader[ "AddTime"  ].ToString());
                    list.Add(si);
                }
                 return  list;
            }
             catch  ( Exception  e)
            {
                 Logger .Error( "executing csp_strategy_invest_all_by_analystid failed"  , e);
                 throw  new  DataAccessException (  "csp_strategy_invest_all_by_analystid failure"  , e);
            }
             finally
            {
                 if  (reader !=  null  && !reader.IsClosed)
                {
                    reader.Close();
                }
            }
        }
4、效果图


不知道未来的你多强大
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
highcharts示例代码（官方例子）
05-03
highcharts示例代码，用来实现各种图表展现，数据组合快，对应图表种类多。
highcharts 在angular中的使用示例代码
08-29
请注意，这个例子是基于AngularJS的，如果你正在使用Angular（非AngularJS），可能需要使用不同的方法来集成Highcharts，例如使用官方的Highcharts Angular模块。总的来说，Highcharts与Angular的结合使用可以方便地...
JavaScript：highcharts示例
qcyfred的博客
06-17 463
highcharts的示例。K线图、line、bar……
highcharts示例和使用
凉拌黄瓜
08-18 325
HighCharts 图表官方地址:http://www.highcharts.com/ HighCharts 图表Demo地址:http://www.highcharts.com/demo/ HighCharts 图表在线编辑地址:http://jsfiddle.net/f
Highcharts简单小示例，15秒了解图解
IT_hot_pot的博客
01-04 419
Highcharts 简介 Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web 网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站 和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、 饼状图、散状点图和综合图表 特点 HighCharts的主要特性包括： 1.兼容性： HighCharts采...
【Web】前端Highcharts各种图形 示例
热门推荐
沙师弟专栏
04-03 1万+
最近项目的需要，看了下前端的框架。想要在Web网页上，做折线图，柱形图等。查了一些开源的项目，发现Highcharts框架还是很好用，于是做了一个小示例，供大家共同学习。Highcharts的官网：https://www.highcharts.com/Highcharts的官网的api文档：https://api.hcharts.cn/Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。
highchartupr:使用Highcharts的示例
05-07
在这个例子中，数据来源于波多黎各大学的出版物，可能需要进行预处理，转化为Highcharts可识别的格式，通常是JSON数组。例如： ```json var data = [1, 3, 4, 5, 7]; ``` 3. **HTML容器**：在HTML文档的`<body>`...
HighCharts 使用案例代码
10-30
这个“HighCharts使用案例代码”压缩包显然是一个包含具体示例的资源集合，对于学习和理解如何在实际项目中应用HighCharts非常有帮助。 首先，HighCharts的基本使用步骤包括以下几点： 1. **引入HighCharts库**：...
highcharts使用
08-08
【标题】：“Highcharts使用” 在网页数据可视化领域，Highcharts是一个非常受欢迎的JavaScript库，它使得创建交互式图表变得简单高效。Highcharts以其丰富的图表类型、高度自定义的选项和出色的性能，广泛应用于...
highchart简单使用示例
skite_ye的博客
02-23 585
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Highcharts 教程 | 菜鸟教程&lt;/title&gt; &lt;script src="jquery-1.8.3.js"&gt;&lt
Highcharts中文网示例及教程
03-15
Highcharts中文网示例及教程
Highcharts-4.0.3下载
08-26
Highcharts图形报表，开源代码。
Highcharts-4.0.4含中文API
12-17
Highcharts-4.0.4含中文API,Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts特点:1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等； 2.图表类型众多：HighCharts现在支持多种图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。 3.不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。 4.提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。 5.放大功能：HighCharts可以大量数据集中显示，并且可以放大某一部分的图形，将图表的精度增大，进行详细的显示，可以选择横向或者纵向放大。 6.时间轴：可以精确到毫秒
在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图包含网页静态demo
09-01
该项目主要是使用.NET MVC 和Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图，让数据更加的明显美观，可以满足绝多数数据报表的需求！
HighCharts基本使用实例(入门)
夏煜正的专栏，曾经写过的一些代码，都是经历。
06-01 4065
HighCharts 摘要 HighCharts是目前最为流行的图表插件,应用范围广泛,目前支持曲线图、区域图、3D图、柱状图、饼图、散列图、混合图等，并且还支持一些拓展的特殊图表，如：仪表图、极地图、箱线图、瀑布图等。因工作中用到，所以在这里我只做最基本的配置使用。 官方网站:www.highcharts.com,有兴趣的同学也可以去上面学习更多的内容。 使用 首先需要
highcharts例子
weixin_30905981的博客
10-10 137
直接看代码 <script language="JavaScript"> $(document).ready(function() { $.ajax({ type:'post', url:'<%=basePath%>charts/getData?type=column', success...
Highcharts入门小示例
weixin_34319374的博客
10-30 96
一、创建条形图 　　1、创建div容器 　　<div id="container" style="min-width:800px;height:400px"></div> 　　2、编写图表配置代码 　　相关示例： 　　<html> 　　　　<head> 　　　　<script type="text/javascript" src...
highcharts详细参数实例非常详细的例子。
weixin_34195364的博客
06-08 196
2019独角兽企业重金招聘Python工程师标准>>> ...
Highcharts使用例子
学习空间...吧
03-28 117
1、引用文件 [code="html"] [/code] 2、前台div [code="html"] [/code] 3、声明 [code="js"] var options = { credits:{ enabled:false // 禁用版权信息 }, chart: { renderTo: '', zoomT...
Highcharts图表库：特性与使用示例
"Highcharts 使用文档，包括各种图表类型的介绍、配置语法、调用示例以及特点和优势。" Highcharts 是一个广泛使用的JavaScript图表库，它允许开发者轻松创建各种高质量的图表，如柱状图、折线图、饼图、天气图等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值