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. [NOIP2014] 提高组 洛谷P1941 飞扬的小鸟

    题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便 ...

  2. 分析ffmpeg解析ts流信息的源码

    花费一些时间,然后全部扔了.为了不忘记和抛砖引玉,特发此贴. ffmpeg解析ts流 1.目的     打算软件方式解析出pat,pmt等码流信息 2.源代码所在位置         下载ffmpeg ...

  3. SQL查询——同一张表的横向与纵向同时比较

    表名:student 表结构及数据: +----+--------+---------+------+------------+--------------+---------+ | id | nam ...

  4. url学习1

    URLConnection提交请求 URL 对象代表统一资源定位器,他是指向互联网"资源"的指针. 通过URL读取网络资源 可以使用如下方法: URL url = new URL( ...

  5. 【Beta】Scrum01

    Info 时间:2016.11.26 21:30 时长:10min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.11.28 21:30 Task Report Name ...

  6. HTML5系列二（标签元素、FileReader、拖放）

    nav元素的使用场合 页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...

  7. BZOJ1691： [Usaco2007 Dec]挑剔的美食家

    传送门: 一句话题解:贪心+treap 好几天前刚学的treap,然后真到了考treap又写不出来,这么辣鸡还搞什么OI 先按$A_i$递减排序,然后把$C_i$也递减排序,然后用一个指针指向$M$序 ...

  8. Centos7安装Oracle12c

    环境: CentOS7@VMware12,分配资源:CPU:2颗,内存:4GB,硬盘空间:30GB Oracle12C企业版64位 过程纪要: root身份安装依赖包: compat-libstdc+ ...

  9. crontab执行脚本中文乱码，手动执行没有问题

    crontab执行脚本中文乱码,手动执行没有问题 产生原因:       这是因为Unix/Linux下使用crontab时的运行环境已经不是用户环境了,因此原本用户下的一些环境变量的设置就失效了.例 ...

  10. UnityShader：HSV(色相，饱和度，亮度)转换

    http://blog.csdn.net/costfine/article/details/46930473 发现其实美术调整颜色的时候大部分都是调整的HSV,因为可以方便的分别调整色相(hue).饱 ...