周金桥
周金桥

在ASP.NET中使用Highcharts js图表

从事过ASP.NET开发的可能都会接触到一些图表控件，比如OWC、ZendGraph等等，这些控件都有一个特点，那就是我们可以像操作.NET中的对象一样控制它们的某些属性，有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件，不要小看了这个JavaScript图表控件，它能生成各种常见的图表。
 Highcharts是一个JavaScript的图表控件，它的官方网站网址是：http://www.highcharts.com/，参考手册网址是：http://www.highcharts.com/ref/，示例网址是：http://www.highcharts.com/demo/。要想简单使用它的图表功能，只需要两个JS类库即可，一个是jquery的，另外一个就是它本身的。但是如果需要支持主题和导出图表功能，就需要更多的JS类库支持了。本篇只讲述满足大多数要求的基本功能。
 
 准备工作
 首先从http://jquery.com/下载最新版本的jQuery，然后从http://www.highcharts.com/下载Highcharts的JavaScript类库。将这两个文件下载到本地的Web项目的JS文件下。
 因为Highcharts是根据js脚本中的属性设置来生成图表的，因为我们需要在ASP.NET中输出这些脚本。为了方便，周公将生成各种图表的核心逻辑部分抽取出来作为一个模板，需要的时候从这些模板中读取数据，然后将模板中的标签替换掉，这样就可以输出到客户端了。这些带有标签的JS模板位于js/template目录下。
 除了输出控制逻辑代码之外，还要在网页的ready客户端事件中调用，如下格式：
 $(document).ready(function() {//这里是逻辑和控制代码});
 
 编码
 为了便于演示，周公在创建ASP.NET页面的时候使用了单页模式，整个页面的代码如下：

 

  
  
  
  
    
   
   
   
   
  1. <%@ Page Language="C#" %> 
    2. 
   
   
   
   
  2. <%@ Import Namespace="System.Text" %> 
    3. 
   
   
   
   
  3. <%@ Import Namespace="System.IO" %> 
    4. 
   
   
   
   
  4.  
    5. 
   
   
   
   
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6. 
   
   
   
   
  6.  
    7. 
   
   
   
   
  7. <script runat="server"> 
    8. 
   
   
   
   
  8.     public string result = string.Empty;  
    9. 
   
   
   
   
  9.     protected void Page_Load(object sender, EventArgs e)  
    10. 
   
   
   
   
  10.     {  
    11. 
   
   
   
   
  11.         string graphType = ddlGraphType.SelectedValue;  
    12. 
   
   
   
   
  12.           
    13. 
   
   
   
   
  13.         graphTypegraphType = graphType.ToLower();  
    14. 
   
   
   
   
  14.         switch (graphType)  
    15. 
   
   
   
   
  15.         {  
    16. 
   
   
   
   
  16.             case "line": result=OutputLine(); break;  
    17. 
   
   
   
   
  17.             case "spline": result = OutputSpline(); break;  
    18. 
   
   
   
   
  18.             case "area": result = OutputArea(); break;  
    19. 
   
   
   
   
  19.             case "areaspline": result = OutputAreaSpline(); break;  
    20. 
   
   
   
   
  20.             case "column": result = OutputColumn(); break;  
    21. 
   
   
   
   
  21.             case "bar": result = OutputBar(); break;  
    22. 
   
   
   
   
  22.             case "pie": result = OutputPie(); break;  
    23. 
   
   
   
   
  23.             case "scatter": result = OutputScatter(); break;  
    24. 
   
   
   
   
  24.         }  
    25. 
   
   
   
   
  25.     }  
    26. 
   
   
   
   
  26.  
    27. 
   
   
   
   
  27.     private string OutputLine()  
    28. 
   
   
   
   
  28.     {  
    29. 
   
   
   
   
  29.         string result = string.Empty;  
    30. 
   
   
   
   
  30.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/line.js"), Encoding.UTF8))  
    31. 
   
   
   
   
  31.         {  
    32. 
   
   
   
   
  32.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    33. 
   
   
   
   
  33.             buffer.Replace("{#title#}", "周公的演示例子");  
    34. 
   
   
   
   
  34.             result = buffer.ToString();  
    35. 
   
   
   
   
  35.         }  
    36. 
   
   
   
   
  36.         return result;  
    37. 
   
   
   
   
  37.     }  
    38. 
   
   
   
   
  38.  
    39. 
   
   
   
   
  39.     private string OutputSpline()  
    40. 
   
   
   
   
  40.     {  
    41. 
   
   
   
   
  41.         string result = string.Empty;  
    42. 
   
   
   
   
  42.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/spline.js"), Encoding.UTF8))  
    43. 
   
   
   
   
  43.         {  
    44. 
   
   
   
   
  44.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    45. 
   
   
   
   
  45.             buffer.Replace("{#title#}", "周公的演示例子");  
    46. 
   
   
   
   
  46.             result = buffer.ToString();  
    47. 
   
   
   
   
  47.         }  
    48. 
   
   
   
   
  48.         return result;  
    49. 
   
   
   
   
  49.     }  
    50. 
   
   
   
   
  50.  
    51. 
   
   
   
   
  51.     private string OutputArea()  
    52. 
   
   
   
   
  52.     {  
    53. 
   
   
   
   
  53.         string result = string.Empty;  
    54. 
   
   
   
   
  54.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/area.js"), Encoding.UTF8))  
    55. 
   
   
   
   
  55.         {  
    56. 
   
   
   
   
  56.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    57. 
   
   
   
   
  57.             buffer.Replace("{#title#}", "周公的演示例子");  
    58. 
   
   
   
   
  58.             result = buffer.ToString();  
    59. 
   
   
   
   
  59.         }  
    60. 
   
   
   
   
  60.         return result;  
    61. 
   
   
   
   
  61.     }  
    62. 
   
   
   
   
  62.  
    63. 
   
   
   
   
  63.     private string OutputAreaSpline()  
    64. 
   
   
   
   
  64.     {  
    65. 
   
   
   
   
  65.         string result = string.Empty;  
    66. 
   
   
   
   
  66.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/areaspline.js"), Encoding.UTF8))  
    67. 
   
   
   
   
  67.         {  
    68. 
   
   
   
   
  68.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    69. 
   
   
   
   
  69.             buffer.Replace("{#title#}", "周公的演示例子");  
    70. 
   
   
   
   
  70.             result = buffer.ToString();  
    71. 
   
   
   
   
  71.         }  
    72. 
   
   
   
   
  72.         return result;  
    73. 
   
   
   
   
  73.     }  
    74. 
   
   
   
   
  74.  
    75. 
   
   
   
   
  75.     private string OutputColumn()  
    76. 
   
   
   
   
  76.     {  
    77. 
   
   
   
   
  77.         string result = string.Empty;  
    78. 
   
   
   
   
  78.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/column.js"), Encoding.UTF8))  
    79. 
   
   
   
   
  79.         {  
    80. 
   
   
   
   
  80.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    81. 
   
   
   
   
  81.             buffer.Replace("{#title#}", "周公的演示例子");  
    82. 
   
   
   
   
  82.             result = buffer.ToString();  
    83. 
   
   
   
   
  83.         }  
    84. 
   
   
   
   
  84.         return result;  
    85. 
   
   
   
   
  85.     }  
    86. 
   
   
   
   
  86.  
    87. 
   
   
   
   
  87.     private string OutputBar()  
    88. 
   
   
   
   
  88.     {  
    89. 
   
   
   
   
  89.         string result = string.Empty;  
    90. 
   
   
   
   
  90.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/bar.js"), Encoding.UTF8))  
    91. 
   
   
   
   
  91.         {  
    92. 
   
   
   
   
  92.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    93. 
   
   
   
   
  93.             buffer.Replace("{#title#}", "周公的演示例子");  
    94. 
   
   
   
   
  94.             buffer.Replace("{#subTitle#}", "扇形图表");  
    95. 
   
   
   
   
  95.             //下面的数据应该是从数据库来，为了演示，这里直接上了  
    96. 
   
   
   
   
  96.             string data = "{name: '1812年',data: [107, 31, 635, 203, 2]}, {name: '1912年',data: [133, 156, 947, 408, 6]}, {name: '2012年',data: [973, 914, 4054, 732, 34]}";  
    97. 
   
   
   
   
  97.             buffer.Replace("{#series#}", data);  
    98. 
   
   
   
   
  98.             result = buffer.ToString();  
    99. 
   
   
   
   
  99.         }  
    100. 
   
   
   
   
  100.         return result;  
    101. 
   
   
   
   
  101.     }  
    102. 
   
   
   
   
  102.  
    103. 
   
   
   
   
  103.     private string OutputPie()  
    104. 
   
   
   
   
  104.     {  
    105. 
   
   
   
   
  105.         string result = string.Empty;  
    106. 
   
   
   
   
  106.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/pie.js"), Encoding.UTF8))  
    107. 
   
   
   
   
  107.         {  
    108. 
   
   
   
   
  108.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    109. 
   
   
   
   
  109.             buffer.Replace("{#title#}", "周公的演示例子");  
    110. 
   
   
   
   
  110.             result = buffer.ToString();  
    111. 
   
   
   
   
  111.         }  
    112. 
   
   
   
   
  112.         return result;  
    113. 
   
   
   
   
  113.     }  
    114. 
   
   
   
   
  114.  
    115. 
   
   
   
   
  115.     private string OutputScatter()  
    116. 
   
   
   
   
  116.     {  
    117. 
   
   
   
   
  117.         string result = string.Empty;  
    118. 
   
   
   
   
  118.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/scatter.js"), Encoding.UTF8))  
    119. 
   
   
   
   
  119.         {  
    120. 
   
   
   
   
  120.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
    121. 
   
   
   
   
  121.             buffer.Replace("{#title#}", "周公的演示例子");  
    122. 
   
   
   
   
  122.             result = buffer.ToString();  
    123. 
   
   
   
   
  123.         }  
    124. 
   
   
   
   
  124.         return result;  
    125. 
   
   
   
   
  125.     }  
    126. 
   
   
   
   
  126. </script> 
    127. 
   
   
   
   
  127.  
    128. 
   
   
   
   
  128. <html xmlns="http://www.w3.org/1999/xhtml"> 
    129. 
   
   
   
   
  129. <head runat="server"> 
    130. 
   
   
   
   
  130.     <title>Hign Charts 实例</title> 
    131. 
   
   
   
   
  131. <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> 
    132. 
   
   
   
   
  132. <script src="js/highcharts.js" type="text/javascript"></script> 
    133. 
   
   
   
   
  133.  
    134. 
   
   
   
   
  134. </head> 
    135. 
   
   
   
   
  135. <body> 
    136. 
   
   
   
   
  136.     <form id="form1" runat="server"> 
    137. 
   
   
   
   
  137.     <div> 
    138. 
   
   
   
   
  138.     <table border="0" width="800"> 
    139. 
   
   
   
   
  139.     <tr><td>请选择图表类型：<asp:DropDownList runat="server" ID="ddlGraphType"   
    140. 
   
   
   
   
  140.             AutoPostBack="True"> 
    141. 
   
   
   
   
  141.         <asp:ListItem>line</asp:ListItem> 
    142. 
   
   
   
   
  142.         <asp:ListItem>spline</asp:ListItem> 
    143. 
   
   
   
   
  143.         <asp:ListItem>area</asp:ListItem> 
    144. 
   
   
   
   
  144.         <asp:ListItem>areaspline</asp:ListItem> 
    145. 
   
   
   
   
  145.         <asp:ListItem>column</asp:ListItem> 
    146. 
   
   
   
   
  146.         <asp:ListItem>bar</asp:ListItem> 
    147. 
   
   
   
   
  147.         <asp:ListItem>pie</asp:ListItem> 
    148. 
   
   
   
   
  148.         <asp:ListItem>scatter</asp:ListItem> 
    149. 
   
   
   
   
  149.         </asp:DropDownList></td></tr> 
    150. 
   
   
   
   
  150.     <tr><td><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div></td></tr> 
    151. 
   
   
   
   
  151.     </table> 
    152. 
   
   
   
   
  152.     </div> 
    153. 
   
   
   
   
  153.       
    154. 
   
   
   
   
  154.     </form> 
    155. 
   
   
   
   
  155.     <script type="text/javascript"> 
    156. 
   
   
   
   
  156.         var chart;  
    157. 
   
   
   
   
  157.         $(document).ready(function() {  
    158. 
   
   
   
   
  158. <%=result %> 
    159. 
   
   
   
   
  159.             });  
    160. 
   
   
   
   
  160.                   
    161. 
   
   
   
   
  161.         </script> 
    162. 
   
   
   
   
  162. </body> 
    163. 
   
   
   
   
  163. </html> 
    164.

 演示
 运行页面之后，效果如下：
 


 


 说明：1.在官方的实例中是采用了ajax.googleapis.com上的jQuery库，如果在不能联网的局域网中则不能正常运行，因为周公直接将jQuery类库下载到本地，这样就不需要联网也能运行了。2.在官方示例中，是直接在$(document).ready()这个方法中将全部逻辑放在这个方法中，在实际开发中可能有大量的逻辑需要判断和处理，所以在这个例子中采用模板替换的方式。
 周公
 2011-4-7

你可能感兴趣的:(chart,asp.net,图表,owc,ZendGraph)

  • Pyecharts数据可视化大屏：打造沉浸式数据分析体验 我的运维人生 信息可视化数据分析数据挖掘运维开发技术共享
    Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
  • pyecharts——绘制柱形图折线图 2224070247 信息可视化pythonjava数据可视化
    一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
  • 高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts信息可视化数据分析
    ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
  • AI论文写作推荐哪个好？分享5款AI论文写作带数据图表网站 小猪包333 写论文人工智能深度学习计算机视觉
    在当今学术研究和写作领域，AI论文写作工具的出现极大地提高了写作效率和质量。这些工具不仅能够帮助研究人员快速生成论文草稿，还能进行内容优化、查重和排版等操作。以下是五款推荐的AI论文写作工具，包括千笔-AIPassPaper。千笔-AIPassPaper千笔-AIPassPaper是一款功能强大的AI论文写作助手，旨在帮助用户快速生成高质量的论文内容。AI论文，免费大纲，10分钟3万字https:
  • 毕业论文附录一般都写什么?大学生写论文是干嘛用的 写个原创论文 人工智能深度学习AI写作chatgpt论文阅读
    毕业论文的附录通常包含一些在正文中不便于展示或详细阐述的内容，但对理解论文整体又具有重要意义的资料。具体来说，附录可能包含以下内容：AI论文，免费大纲，10分钟3万字，查重高于15%退费，支持数据图表！！AIPaperPass-AI论文写作指导平台AIPaperPass是AI原创论文写作平台，免费千字大纲，5分钟生成3万字初稿，提供答辩汇报ppt、开题报告、任务书等，40篇真实中英文知网参考文献，
  • 高仿一个echarts饼图 街角小林2
    开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
  • 判断包含关系 周bro 前端javascript开发语言
    //-----------------------------------判断某个字符串是否包含某字符------------------------------------//使用includes()方法//letstr="Helloworld!";//letcharToFind="a";//if(str.includes(charToFind)){//console.log(`字符串"${st
  • python之pyecharts制作可视化数据大屏 cesske 大数据
    文章目录前言一、安装Pyecharts二、创建Pyecharts图表三、设计大屏布局四、实时数据更新五、部署和展示总结前言使用Pyecharts制作可视化数据大屏是一个复杂但有趣的过程，因为Pyecharts本身是一个用于生成Echarts图表的Python库，而Echarts是由百度开发的一个开源可视化库，支持丰富的图表类型和高度自定义。然而，Pyecharts本身并不直接提供“大屏”的解决方案
  • 分享一个基于python的电子书数据采集与可视化分析 hadoop电子书数据分析与推荐系统 spark大数据毕设项目（源码、调试、LW、开题、PPT) 计算机源码社 Python项目大数据大数据pythonhadoop计算机毕业设计选题计算机毕业设计源码数据分析spark毕设
    作者：计算机源码社个人简介：本人八年开发经验，擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等，大家有这一块的问题可以一起交流！学习资料、程序开发、技术解答、文档报告如需要源码，可以扫取文章下方二维码联系咨询Java项目微信小程序项目Android项目Python项目PHP项目ASP.NET项目Node.js项目选题推荐项目实战|p
  • 认识世界 陈陈_19b4
    9月16日，雨。阅读书目:《真相》。作者:瑞典统计学家和医学教授汉斯·罗斯林，他的儿子奥拉·罗斯林，google公共数据团队的负责人。汉斯·罗斯林还是一位全球知名的教育家，是世界健康组织和联合国儿童基金会的顾问。他与儿子儿媳共同创办了Gapminder基金会，开发了Trendalyzer软件，将国际统计数据转化成交互式的生动有趣的图表，帮助人们以事实为基础来观察世界，被称为“可视化数据之父”。图片
  • FlexibleBI系统是现代制造企业提升生产质量和效率的重要工具 三坐标CMM质量数据系统 制造
    SPC（统计过程控制）系统是现代制造企业提升生产质量和效率的重要工具。我们的SPC系统通过一键生成全面的SPC分析报告，帮助企业快速、精准地完成质量分析，并大大减少了手动处理数据的复杂性。FlexibleBI实时更新的控制图在生产过程中，控制图可以实时自动更新，确保企业能够随时掌握生产状态，及时发现并处理潜在问题。系统支持多种标准SPC控制图，如X-bar、R、P等图表，全面覆盖所有常见生产场景。
  • 七步成诗（三） d1698df63db8
    第四步：熟练掌握专业方法、工具流和业务模板。要组织力量编写《咨询方法、工具和业务模板集锦》并开展系列讲座，组织力量编写《用图表说话》并讲座。各位同事，尤其是年轻同事一定要能快又好地使用各种专业方法和工具，把这当作吃饭家伙，当作就象我们中国人用筷子一样的基本功。有的咨询师连做个PPT文件都画得粗鄙不堪，连画个图表都不会，居然还心安理得。这个样子，老人也就罢了，年轻人还这样，就令人失望、让人看不起、让
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • 通过C# 裁剪PDF页面 Eiceblue C#.NETPDFc#pdf开发语言visualstudio
    在处理PDF文档时，有时需要精确地裁剪页面以适应特定需求，比如去除广告、背景信息或者仅仅是为了简化文档内容。本文将指导如何使用免费.NET控件通过C#实现裁剪PDF页面。免费库FreeSpire.PDFfor.NET支持在.NET(C#,VB.NET,ASP.NET,.NETCore)程序中实现创建、操作、转换和打印PDF文档等操作。可以从以下链接下载产品包后手动添加引用，或者直接通过NuGet安
  • 【监控告警】02-Promtheus的学习之路 Kearey. 监控告警微服务网关学习方法
    prometheus采用的是拉模式为主，推模式为辅的方式采集数据。Prometheus作为一个指标系统天生就不是精确的——由于指标本身就是稀疏采样的，事实上所有的图表和警报都是”估算”，我们也就不必太纠结于图表和警报的对应性，能够帮助我们发现问题解决问题就是一个好监控系统。当然，有时候我们也得证明这个警报确实没问题，那可以看一眼`ALERTS`指标。`ALERTS`是Prometheus在警报计算
  • R 数据可视化 —— 韦恩图 名本无名
    前言对于数据集之间交叠关系的可视化，通常想到的是绘制韦恩图。韦恩图是一种关系型图表，通过图形之间的重叠来反映数据集之间的相交关系。下面，我们来简单介绍一下如何绘制韦恩图韦恩图绘制韦恩图的包有很多，比如gplots包的venn()函数、limma包的vennDiagram()函数、venneuler包的venneuler()函数。但是这些包绘制出来的图像效果都不是很好，所以我们使用比较成熟的包Ven
  • 【无标题】 2401_84102689 2024年程序员学习java
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mark
  • 基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板 abments 实用小工具javascript前端html
    效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
  • 基于VUE2-dataV和echarts实现的可视化大屏，百分比适配PC端 风流野趣fly echarts信息可视化前端vue.jsjavascriptvscode大数据
    可视化平台中，数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分，左侧由能耗总览、耗能占比、库存预警构成，中间由数据总览、销售计划完成率构成，右侧由销售统计、销售排名（TOP8）、生产统计构成。平台右上角动态显示当前系统日期、星期、时间，格式。在管理端进行添加数据后，数据可视化图表进行相应变化。1.能耗总览仪表盘，统计分析耗电量、耗水量、
  • 关于Echarts的一些设置总结 夏之小星星 echarts前端javascript
    最近领导让我一个偏后端程序员画各种数据展示echarts页面，遇到好多问题在此记录一下，未完待续。。。ps：不喜欢画页面啊啊啊啊啊，以前公司这些都是ui的活啊啊啊啊，折磨死我啦啊啊啊啊一、柱形图1、echarts如何设置柱形颜色渐变在option加color属性option={color:{type:'linear',//x=0,y=1,柱子的颜色在垂直方向渐变x:0,y:1,colorStops
  • SQLite的架构 (The Architecture Of SQLite) 斗大的熊猫 Talkabout
    这篇文档描述SQLite库的基本架构。对那些想要理解和修改SQLite的人很有帮助。下面这张图表展示了SQLite的组件和它们之间的关系。接口（Interface）SQLite的很多对外接口的实现函数在main.c，legacy.c和vdbeapi.c。还以一些散落在其他文件中，sqlite3_get_table()函数实现在table.c，sqlite3_mprintf()函数在printf.c
  • echarts X轴文本太长 formatter自定义文本的显示方式 每一天，每一步 EChartsechartsjavascriptecmascript
    如果ECharts中X轴的文本太长，可以通过设置axisLabel的rotate属性来旋转标签，或者使用formatter函数来自定义文本的显示方式。另外，可以开启axisLabel的interval属性来控制显示的标签的间隔。option={tooltip:{},xAxis:{type:'category',data:['这是一段非常长的文本','短文本','另一段长文本','另一段长文本'],
  • echarts根据数量级设置最大值最小值为整百的数 每一天，每一步 EChartsecharts前端javascript
    在ECharts中，可以通过设置yAxis的min和max属性来控制y轴的最大值和最小值。代码：option={yAxis:{type:'value',min:function(value){returnvalue.min-(value.min%100);},max:function(value){returnvalue.max>0?(value.max-(value.max%100)+100):
  • echarts象形渐变柱状图 星星跌入梦境* echartsangular.js前端
    一、效果图如下：二、代码如下（1）父组件importitemfrom'../bigdata/components/item.vue'exportdefault{components:{item}}.page-con{width:100%;height:100%;.main-con{width:35%;height:33%;}}（2）子组件importechartsfrom"echarts";exp
  • C# 在WPF中实现图表生成 A_nanda WPF赏析c#wpf开发语言
    在现代应用程序中，数据可视化是一个重要的功能，它可以帮助用户更直观地理解数据。在C#WPF（WindowsPresentationFoundation）中，有多种方式可以生成图表。以下是五种常见的方法，每种方法都有其独特的优势和局限。1.使用System.Windows.Shapes命名空间代码示例：<RectangleWidth="50"Height="50"Fill="Blue"Canva
  • 微信小程序中实现类似于 ECharts 的图表渲染及优化 人工智能的苟富贵 前端小程序微信小程序echarts小程序
    文章目录前言一、微信小程序中使用ECharts概述二、ECharts在小程序中的集成步骤2.1在小程序项目的根目录下，运行以下命令安装echarts依赖：2.2在小程序的components文件夹中创建ec-canvas组件。2.3在需要展示图表的页面中，引用ec-canvas组件，并初始化ECharts图表：三、微信小程序中使用Canvas绘制图表基础示例：绘制一个简单的折线图四、动态数据更新的
  • 甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态 界面开发小八哥 甘特图uiDHTMLX项目管理javascript
    DHTMLXGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。在现代Web应用程序中，在页面重新加载之间保持UI元素的状态对于流畅的用户体验至关重要。在本教程中我们将知道您完成DHTMLXGantt中持久UI的简单实现，重点关注一小部分特性——即任务的展开或折叠分支，以及选定的甘特图缩放级别。您将了解如何将这些设置存储在浏
  • asp.net core的入门教学 21软件外包1班-庞兴南 asp.net后端
    什么是ASP.NETCoreasp.netcore是一个基于HTML和ASP的动态Web开发框架，主要用于web应用程序的开发。它是一个轻量级框架，使用HTML、ASP、CSS、JavaScript等技术。它易于使用和部署，可以快速构建web应用程序。asp.netcore提供了丰富的功能，包括模板引擎、文件解析、数据处理和用户管理等。本文将介绍asp.netcore的主要功能和特点，并提供使用方
  • 6.1 ASP.NET Core Web 入门 步、步、为营 .NetCoreasp.netmvc
    6.1ASP.NETCoreWeb入门ASP.NETCore中，严格来讲只有一个Asp.netCoreMVC一个框架，Asp.netCoreMVC既支持基于视图的MVC开发，也支持WebAPI和RazorPages开发。ASP.NETCoreMVC项目在VS2022中，一定选择ASP.NETCoreWeb应用（模型-视图-控制器）项目模板项目中wwwroot文件夹包含图片、JS、CSS等静态文件，
  • asp.net core 8.0 使用 Autofac ioc 容器 具体实例 彭小彭~ .netcoreasp.net
    要在ASP.NETCore8.0项目中具体实现使用Autofac作为IOC容器，我们将遵循一个明确的示例，从创建新项目到配置Autofac，并演示如何注册和解析服务。步骤1:创建ASP.NETCore8.0项目首先，使用VisualStudio或命令行工具创建一个新的ASP.NETCoreWeb应用程序。如果使用命令行，可以运行以下命令：dotnetnewwebapp-nAutofacDemocd
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他