1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Highcharts Demo</title>
  6. <script type="text/javascript" src="js/jquery.min.js"></script>
  7. <script type="text/javascript" src="js/highcharts.js"></script>
  8. <script type="text/javascript" src="js/excanvas.compiled.js"></script>
  9. <script type="text/javascript">
  10. var chart;
  11. $(document).ready(function() {
  12. chart = new Highcharts.Chart({
  13. chart: {
  14. renderTo: 'container',//设置显示图表的容器
  15. type: 'line',//设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column
  16. //          defaultSeriesType: 'column', //图表的默认样式
  17. //          margin:[21, 23, 24, 54],//整个图表的位置(上下左右的空隙)
  18. marginRight: 200,//右边间距
  19. marginBottom: 25//底部间距/空隙
  20. //          inverted: false,//可选，控制显示方式，默认上下正向显示
  21. //          shadow:true,//外框阴影
  22. //          backgroundColor:"#FFF",
  23. //          animation:true,
  24. //          borderColor:"#888",
  25. //          borderRadius:5,
  26. //          borderWidth:1,
  27. //          ignoreHiddenSeries:true,
  28. //          reflow:true,
  29. //          plotBorderWidth:1,
  30. //          alignTicks:true,
  31. zoomtype:'xy' //x轴y轴方向均可鼠标拖动放大
  32. },
  33. labels:{//在报表上显示的一些文本
  34. items:[{
  35. html:'本图表数据有误，仅用于说明相应的属性',
  36. style:{left:'100px',top:'60px'}
  37. }, {
  38. html:'http://www.highcharts.com/demo',
  39. style:{left:'100px',top:'100px'}
  40. }]
  41. },
  42. credits:{//右下角的文本
  43. enabled: true,
  44. position: {//位置设置
  45. align: 'right',
  46. x: -10,
  47. y: -10
  48. },
  49. href: "http://www.highcharts.com",//点击文本时的链接
  50. style: {
  51. color:'blue'
  52. },
  53. text: "Highcharts Demo"//显示的内容
  54. },
  55. //        plotOptions:{//绘图线条控制
  56. column: {//控制柱状宽度
  57. pointPadding: 0.2,
  58. borderWidth: 0,
  59. pointWidth: 30
  60. },
  61. //            spline:{
  62. //                allowPointSelect :true,//是否允许选中点
  63. //                animation:true,//是否在显示图表的时候使用动画
  64. //                cursor:'pointer',//鼠标移到图表上时鼠标的样式
  65. //                dataLabels:{
  66. //                   enabled :true,//是否在点的旁边显示数据
  67. //                    rotation:0
  68. //                },
  69. //                enableMouseTracking:true,//鼠标移到图表上时是否显示提示框
  70. //                events:{//监听点的鼠标事件
  71. //                    click: function() {
  72. //                    }
  73. //                },
  74. //                marker:{
  75. //                    enabled:true,//是否显示点
  76. //                   radius:3,//点的半径
  77. //                      fillColor:"#888"
  78. //                    lineColor:"#000"
  79. //                    symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//设置点用图片来显示
  80. //                    states:{
  81. //                        hover:{
  82. //                            enabled:true//鼠标放上去点是否放大
  83. //                                                    },
  84. //                        select:{
  85. //                            enabled:false//控制鼠标选中点时候的状态
  86. //                        }
  87. //                    }
  88. //               },
  89. //                states:{
  90. //                    hover:{
  91. //                        enabled:true,//鼠标放上去线的状态控制
  92. //                        lineWidth:3
  93. //                    }
  94. //                },
  95. //                stickyTracking:true,//跟踪
  96. //                visible:true,
  97. //                lineWidth:2//线条粗细
  98. //                pointStart:100,
  99. //            }
  100. //        },
  101. title: {
  102. text: 'Monthly Average Temperature',//标题
  103. x: -20 //center设置标题的位置
  104. },
  105. subtitle: {
  106. text: 'Source: WorldClimate.com',//副标题
  107. x: -20//副标题位置
  108. },
  109. xAxis: {//横轴的数据
  110. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  111. 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  112. //          lineWidth:1,//纵轴一直为空所对应的轴，即X轴
  113. //          plotLines: [{//一条竖线
  114. //               color: '#FF0000',
  115. //               width: 2,
  116. //               value: 5.5
  117. //           }]
  118. //          labels: {//设置横轴坐标的显示样式
  119. //              rotation: -45,//倾斜度
  120. //              align: 'right',
  121. //              style: {
  122. //                   font: 'normal 13px Verdana, sans-serif'
  123. //                   color: 'white'
  124. //              }
  125. //          }
  126. },
  127. yAxis: {  tickPixelInterval: 20, //两坐标之间的宽度
  128. //          tickInterval: 200,  //自定义刻度
  129. //          offset:60,  //把X轴的位置往右移动 在highstock里面依然有效
  130. //          max:1000,//纵轴的最大值
  131. //          min: 0,//纵轴的最小值
  132. title: {//纵轴标题
  133. text: '百分数'
  134. },
  135. labels : {
  136. formatter : function() {//设置纵坐标值的样式
  137. return this.value + '%';
  138. }
  139. },
  140. plotLines: [{
  141. value: 0,
  142. width: 1,
  143. color: '#808080'
  144. }]
  145. },
  146. tooltip: {//鼠标移到图形上时显示的提示框
  147. formatter: function() {
  148. return '<b>'+ this.series.name +'</b><br/>'+
  149. this.x +': '+ this.y +'°C';
  150. }
  151. //          crosshairs:[{//控制十字线
  152. //              width:1,
  153. //              color:"#CCC",
  154. //              dashStyle:"longdash"
  155. //          }
  156. },
  157. legend: {//方框所在的位置(不知道怎么表达)
  158. layout: 'vertical',
  159. align: 'right',
  160. verticalAlign: 'top',
  161. x: -10,
  162. y: 100,
  163. borderWidth: 0
  164. },
  165. series: [{//以下为纵轴数据
  166. name: 'Tokyo',
  167. data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  168. }, {
  169. name: 'New York',
  170. 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]
  171. }, {
  172. name: 'Berlin',
  173. data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  174. }, {
  175. name: 'London',
  176. data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  177. }]
  178. });
  179. });
  180. </script>
  181. </head>
  182. <body>
  183. <div id="container" ></div>
  184. </body>
  185. </html>

效果图类似于如下:

Highcharts属性中英文参照的更多相关文章

  1. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  2. Highcharts属性详解

    Highcharts的基本属性和方法详解 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学 ...

  3. Highcharts属性

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. [M]带属性块参照的转换

    有一张表格,表格的每一行都由带有属性的块参照组成,如图: 魔法表格不能直接识别有块参照组成的表格,需要使用 EXPLODE 命令将块参照分解,但多分解带有属性的块只能得到属性的定义 这是就需要使用 B ...

  5. android button text属性中英文大小写问题

    Android版本升级的原因,需要手动添加属性android:textAllCaps="false"

  6. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  7. HighCharts/Highstock使用小结,使用汉化及中文帮助文档

       此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts  版本:Highcharts-3.0.1 Hi ...

  8. 通过属性 Cesium的FBO主要支持两种方式

    角色其实就是一类权限的分组,所以给用户分配角色其实也是在给用户分配权限.在oracle中有三个比较常用的角色.对于一般不是很严格的系统可以授予开发用户CONNECT.RESOURCE角色权限即可. 其 ...

  9. CAD 二次开发--属性块

    1.属性块的定义 属性块是有构成的实体和附加信息(属性)组成的,属性块中块的定义与简单块中块的定义一样,而属性的定义主要是通过属性的AttributeDefinition类的有关属性和函数来实现的.具 ...

随机推荐

  1. 【BZOJ-1103】大都市meg 树状数组 + DFS序

    1103: [POI2007]大都市meg Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2009  Solved: 1056[Submit][Sta ...

  2. 【BZOJ-2438】杀人游戏 Tarjan + 缩点 + 概率

    2438: [中山市选2011]杀人游戏 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1638  Solved: 433[Submit][Statu ...

  3. 【BZOJ-4199】品酒大会 后缀数组 + 并查集合并集合

    4199: [Noi2015]品酒大会 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 436  Solved: 243[Submit][Status] ...

  4. 如何利用SmartGit将一个已经写好的项目push到github

    首先在github上创建一个repository, 然后在SmartGit中 点击有上角的repository然后选择Add or Create...然后点击那个文件夹的图标之后选中自己的项目的问题件 ...

  5. 【BNUOJ19500】 Matrix Decompressing

    https://www.bnuoj.com/v3/problem_show.php?pid=19500 (题目链接) 题意 给出一个R行C列的正整数矩阵,设前${A_i}$项为其前i行所有元素之和,$ ...

  6. SVN分支研究

    在结合之前总结的定制开发的产品版本开发问题解决的方法:http://www.cnblogs.com/EasonJim/p/5971906.html,今天来研究以下用SVN处理这类的问题. 研究SVN分 ...

  7. Zend Guard Loader/Zend Loader是干什么的

    Zend Guard Loader 是加速php的,能提高30%—40%速度.PHP 5.3.X 开始 Zend Optimizer 正式被 Zend Guard Loader 取代.在PHP 5.5 ...

  8. GDUT校赛

    题目链接:http://4.gdutcode.sinaapp.com/contest.php?cid=1021 F 题意:给出n和m,要求满足gcd(x,y)=n && lcm(x,y ...

  9. Codeforces Round #389 Div.2 C. Santa Claus and Robot

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. Newtonsoft.Json动态过滤属性

    Newtonsoft.Json动态过滤属性 接口写的多了,会发现很多的问题.同一个dto,不同的action返回的字段个数不一样.往往开发人员因为懒或者各种原因一股脑的全返回,会浪费很多流量且用户体验 ...