周金桥
周金桥

在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)

  • 15个小技巧，让我的Windows电脑更好用了！ 曹元_
    01.桌面及文档处理第一部分的技巧，主要是围绕桌面的一些基本操作，包括主题设置、常用文档文件快捷打开的多种方式等等。主题换色默认情况下，我们的Win界面可能就是白色的文档界面，天蓝色的图表背景，说不出哪里不好看，但是就是觉得不够高级。imageimage说到高级感，本能第一反应就会和暗色模式联想起来，如果我们将整个界面换成黑夜模式的话，它会是这样的。imageimage更改主题颜色及暗色模式，我们
  • python编程第十四课：数据可视化 小小源助手 Python代码实例信息可视化python开发语言
    Python数据可视化：让数据“开口说话”在当今数据爆炸的时代，数据可视化已成为探索数据规律、传达数据信息的关键技术。Python凭借其丰富的第三方库，为数据可视化提供了强大而灵活的解决方案。本文将带你深入了解Matplotlib库的基础绘图、Seaborn库的高级可视化以及交互式可视化工具Plotly，帮助你通过图表清晰地展示数据背后的故事。一、Matplotlib库基础绘图Matplotlib
  • 数据可视化：数据世界的直观呈现 卢政权1 信息可视化数据分析数据挖掘
    在当今数字化浪潮中，数据呈爆炸式增长。数据可视化作为一种强大的技术手段，能够将复杂的数据转化为直观的图形、图表等形式，让数据背后的信息一目了然。无论是在商业决策、科学研究还是日常数据分析中，数据可视化都发挥着极为重要的作用。它帮助我们快速理解数据的分布、趋势、关联等特征，从而为进一步的分析和行动提供有力支持。接下来，我们将深入探讨数据可视化的奥秘，并通过代码示例展示其实际应用。一、Python数据
  • vue项目 阿什么名字不会重复呢 vue.js前端javascript
    vue进行配置创建vue项目vuecreateone//one就是项目名字npmielement-ui--Snpmiaxios--savenpmiecharts--save配置main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElement
  • 不会PS也不会建模，却想把敦煌鸣沙山塞进小方块里！ 自律的音律
    掐指一算，好像很久没出特殊玩法的教程了~刚好前几天有小伙伴提问：有没有立体图表可以参考一下？由此延伸到以前发的一篇文章，里面整合了一些高质量的立体图表：我知道，PPT自带的图表你已经看腻了，是时候养养眼啦！那么问题来了，文章中的这种效果，要是只会PPT能不能做？经过@隔壁家老廖的提醒，通过关键词microworld找到了一些参考图：仔细想了想，似乎也没有很难，主要是用到了裸眼3D效果，结合切面光影
  • Python 数据可视化神器—Pyecharts 代码输入中... pythonecharts开发语言数据分析pycharm
    前言Echarts是百度开源的一款数据可视化JS工具，数据可视化类型十分丰富，但是得通过导入js库在JavaWeb项目上运行。作为工作中常用Python的选手，不能不知道这款数据可视化插件的强大。那么，能否在Python中也能用到Echarts的功能呢?寻找中惊喜地发现了pyecharts，只需在python中安装该模块即可使用。安装常用的pip安装包一键安装pyecharts#pyecharts
  • 【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 微博文章数据可视化分析-文章分类下拉框实现 java1234_小锋 NLPNLLP微博舆情分析python自然语言处理flask
    大家好，我是java1234_小锋老师，最近写了一套【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts)视频教程，持续更新中，计划月底更新完，感谢支持。今天讲解微博文章数据可视化分析-文章分类下拉框实现视频在线地址：2026版【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts+爬虫)视频教程（火爆连载更
  • AI技术落地的综合实战经验报告，结合最新行业案例、代码示例及可视化图表，系统阐述AI在开发提效、算法优化与行业应用中的实践路径。
    一、自动化开发革命：从代码生成到低代码架构1.1自然语言转代码（NL2Code）实战技术架构基于GPT-4/Codex的代码生成器实现以下流程：graphTDA[自然语言输入]-->B(GPT-4/Codex解析)B-->C{代码解析器}C-->D[Python/Java/SQL]C-->E[测试用例]D-->F[代码质量检测]F-->G[可执行程序]典型场景：数据清洗函数生成python#输入提
  • 一图了解2024年天猫双十一活动时间以及满减优惠规则 全网优惠分享君
    在万众瞩目的年度购物盛宴——2024年天猫双十一活动即将拉开帷幕之际，一张精心设计的图表，将为您清晰呈现这一全球购物狂欢节的时间轴与满减优惠规则，让您轻松掌握省钱秘籍，尽享购物乐趣。活动时间概览预售期：今年的天猫双十一预售活动从10月24日晚上8点正式拉开序幕，这一提前启动的预售机制，旨在让消费者有更充足的时间挑选心仪商品并锁定优惠。预售期将持续至10月31日下午6点，期间，您可以支付定金来锁定商
  • 老码农和你一起学AI：Python系列-Matplotlib 核心架构 chilavert318 熬之滴水穿石matplotlibpython
    在数据可视化领域，Matplotlib就像一位全能的画家——它能画出折线图、柱状图等基础图表，也能创作热力图、3D图等复杂作品。但要真正用好这位“画家”，首先得理解它的“创作工具”：Figure与Axes对象的关系、绘图的基本流程、图表保存的关键参数，以及如何统一调整图表风格。这些基础架构知识，是从“能画图”到“画好图”的关键。一、Figure与Axes如果把Matplotlib的绘图过程比作在画
  • 深入学习FormView控件及其在ASP.NET中的应用 鸟看世界
    本文还有配套的精品资源，点击获取简介：本文深入介绍了ASP.NETWebForms中的FormView控件，解释了其功能特性及配置方法，并通过具体实例展示了如何使用FormView进行数据显示、编辑、插入、更新和删除操作。文章详细解释了FormView的基本结构、使用模板、CommandField配置以及分页实现，并讨论了相关的事件处理。通过学习本教程，开发者可以掌握如何在实际项目中应用FormV
  • echarts实现两个饼图嵌套 js_user echarts前端javascriptcsshtmlvue.js
    效果展示需求：内层饼图为一级分类，外层饼图为二级分类。内外层一级分类和多属的二级分类颜色一样，且悬浮二级分类，一级分类同样有高亮效果。一级分类和二级分类悬浮有释义说明（解释这个分类的含义）由于二级分类只展示其中一部分，所以一级分类和二级分类所占角度不一样。关键代码展示**定义option**constcolors=["#fc8251","#5470c6","#91cd77","#ef6567","
  • echarts中toolbox工具栏悬浮出现中文说明 js_user echarts前端javascript
    需求：目前是这种效果，要改成工具栏悬浮出现中文说明//在对应的工具栏配置中，添加titletoolbox:{show:true,//是否显示工具栏feature:{dataView:{show:true,readOnly:false,title:'数据视图'},saveAsImage:{show:true,title:'保存为图片'},},},
  • Python数据可视化库之autoviz使用详解
    概要在数据可视化的广阔领域中，快速且智能地将数据转化为直观图表，是数据分析师和开发者的共同需求。Python的autoviz库应运而生，它凭借“一键生成可视化”的强大功能，极大地简化了数据可视化流程。无论是处理简单数据集，还是复杂的多变量数据，autoviz都能自动分析数据特征，生成高质量可视化结果，成为提升数据分析效率的得力助手。安装与验证1、安装方法autoviz库的安装可以借助Python常
  • 文案丨那些可爱又沙雕的句子 画像集
    Ryan的诚意分享推荐搜索文案头像壁纸背景配图表情我们总会被生活中一些人惹恼，现在有一去火良方：陈皮4.5g，半夏3g，甘草0.9g，茯苓3g，三碗水大火熬成一碗，趁热泼到对方身上。在吗？有人借我50吃宵夜吗？我不是骗子，骗子会说明天还，我不还。靓仔你好，我叫乐多，所以你想要养乐多吗？我本来是个敲可爱的女孩子，后来用力过猛，把可爱敲si了，就成了沙雕。钱能不能买来快乐？我不知道，但是我很快乐，可以
  • Grafana 可视化配置 7 号 grafana
    Grafana是什么Grafana是一个开源的可视化和监控工具，广泛用于查看和分析来自各种数据源的时间序列数据。它提供了一个灵活的仪表盘（dashboard）界面，用户可以通过它将数据源中的指标进行图表化展示和监控，帮助分析趋势、监控系统健康状态以及进行告警管理。Grafana常用于DevOps、IT基础设施监控和性能优化领域，与Prometheus等监控工具搭配使用非常流行。Grafana的特点
  • Vue-23-通过flask接口提供的数据使用plotly.js绘图(二) 皮皮冰燃 Vuejavascriptvue.jsflask
    文章目录1推荐1.1App.vue(根组件)1.2Recommand.vue(父组件)1.3Children.vue(子组件)1.4index.js1.5展示2判断接收到的数据个数2.1App.vue2.2All.vue2.3效果1推荐根据数据项的数量推荐可以使用的图表，选择指定的图表绘图。1.1App.vue(根组件)
  • 【数据集】全球 0.5 度湿地甲烷排放与不确定性数据集 WetCHARTs WW、forever 数据集CH4
    目录数据概述v1.3.3新特性应用与验证数据下载数据文件信息模型配置说明（四位代码）空间与时间覆盖参考数据集名称：CMS:全球0.5度湿地甲烷排放与不确定性（WetCHARTsv1.3.3）数据概述数据概述-WetCHARTsv1.3.1数据概述-WetCHARTsv1.3.3此数据集提供了2001年1月1日至2022年8月31日期间，全球湿地甲烷（CH₄）排放的月度估算数据，空间分辨率为0.5x
  • 微信小程序动态柱状图实现案例分析
    本文还有配套的精品资源，点击获取简介：微信小程序是一种面向移动端的应用开发平台，利用WXML和WXSS以及JavaScript进行开发。本文介绍了如何在微信小程序中实现动态柱状图的实例，涵盖了数据驱动、使用图表库、生命周期方法、动画效果、事件处理、布局与样式设计、API调用以及调试与发布等关键知识点。通过实际案例源码分析，帮助开发者深入理解动态柱状图的实现过程和技术要点。1.微信小程序开发基础微信
  • P1019 [NOIP2000 提高组] 单词接龙c++ Charon.778 刷题记录c++深度优先算法
    #includeusingnamespacestd;intn;stringarr[21];intvis[21];intmaxn;voiddfs(stringa,intx){maxn=max(maxn,x);//取最大值for(inti=1;i>n;for(inti=1;i>arr[i];}chart;cin>>t;for(inti=1;i<=n;i++){if(arr[i][0]==t){//寻找
  • Markdown编辑器全新功能大揭秘 方俊涵 c++
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mark
  • 16、软件测试与实时系统设计方法解析
    软件测试与实时系统设计方法解析1.因果图测试用例设计方法因果图是一种可用于功能测试范围内的测试用例设计方法，它能系统地选择一组测试用例，这些测试用例有很高的概率检测出系统中存在的错误。该技术在开发测试用例时，会探索系统的输入以及输入的组合（即原因）。1.1因果图的基本概念布尔图表示：使用布尔图来表示从输入到输出的链接。布尔图是一种形式逻辑模型，使用有限的符号集来表示逻辑运算符，如“与（and）”、
  • PYTHON从入门到实践-16数据视图化展示 定制开发才有价值 pythonwindowsecharts
    在数据分析和可视化领域，CSV和JSON是两种最常用的数据格式。本文将介绍如何使用Python处理这两种格式的数据，并利用Matplotlib和Cartopy等库生成专业的可视化图表。一、CSV数据处理与温度变化图1.1生成模拟天气数据我们首先创建一个生成模拟天气数据的Python脚本，将结果保存为CSV格式：python复制下载importcsvimportrandomfromdatetimei
  • vue3，echarts图表刷新空白，或者说父组件代码改动图表就空白问题 CDwenhuohuo echartsvue.jsjavascript
    需要考虑和排查：数据更新问题：父组件更新数据时，确保数据传递给子组件的对象发生了变化。在Vue中，响应式数据更新需要通过赋值新对象或修改对象属性来触发。如果只是修改对象的属性值而不修改对象本身，可能不会触发子组件的重新渲染。在打印输出中，确保打印的数据确实反映了父组件更新后的数据状态，包括值。图表初始化和销毁：确保在子组件中正确地初始化和销毁echarts实例。每次父组件数据更新时，应当先销毁之前
  • AJAX与ASP.NET Web方法的实践与原理 t0_54coder 编程问题解决手册前端ajaxasp.net个人开发
    在现代Web开发中，AJAX（AsynchronousJavaScriptandXML）是提升用户体验的关键技术之一，尤其在需要与服务器交互而不刷新整个页面的情况下。今天，我们将探讨如何在ASP.NET中使用AJAX结合Web方法（WebMethod）来实现这一目的，并深入分析其中的原理。实例背景假设我们有一个简单的温度转换器，需要将华氏温度转换为摄氏温度，我们希望这个转换过程是即时的，不需要用户
  • 50、深入解析微软.NET框架 kk1234 网络应用开发框架全解析.NET框架C#编程ASP.NET
    深入解析微软.NET框架1.引言在现代软件开发中，微软的.NET框架已经成为构建和部署各种应用程序的重要工具。它不仅支持面向组件编程，还提供了强大的开发环境，使得开发者可以创建高效、可靠且易于维护的应用程序。本文将深入探讨.NET框架的核心组件，包括C#编程语言、ASP.NET和Web服务支持，揭示其在开发基于HTML的Web应用程序方面的强大功能。2..NET框架概述.NET框架是一系列技术的集
  • 4、ASP.NET MVC与jQuery开发指南 corn8 探索.NETASP.NETMVCjQuery路由
    ASP.NETMVC与jQuery开发指南1.路由与数据库访问在ASP.NETMVC中，MapRoute的第三个参数用于定义URL各部分的默认值，这使得我们可以省略部分或全部URL部分。若省略控制器，默认使用Home控制器；若省略动作，默认使用Index动作；id参数为可选，允许使用无参数的动作方法。大多数业务线（LOB）应用程序需要与持久化数据存储（如MicrosoftSQLServer）中的数
  • 用Python爬虫玩转数据可视化（实战向）
    文章目录一、先来点有意思的！二、开整！数据抓取部分2.1选个软柿子捏2.2数据提取黑科技三、数据清洗骚操作3.1温度数据大改造3.2风力等级提取四、可视化ShowTime！4.1折线图基础款4.2进阶版热力图4.3动态图表黑科技五、避坑指南（血泪经验）六、还能玩得更花吗？七、完整代码哪里找？八、说点掏心窝的话一、先来点有意思的！你相不相信只需要30行代码，就能把网页上的原始数据变成酷炫的图表？今天
  • mysql sql 优化
    这里写自定义目录标题数据除重欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入BATJ
  • OpenCV常见的优化方法和技巧总结 liuyong178
    这里写自定义目录标题新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入【尊重原创，转载请注明出处】http://bl
  • 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其他