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. BZOJ3240 [Noi2013]矩阵游戏

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  2. BZOJ2038 小z的袜子

    题意:给一些数,然后每次询问一段区间,问从这个区间中抽走两个数,抽到相同的数的概率 正解:莫队算法 今天新学习了莫队算法,感觉好神,离线的询问好像都可以用莫队. 要不是坑爹的HNOI2016考了两道莫 ...

  3. Swift&Node 使用Alamofire进行Post

    这篇博客主要实现Swift客户端和NodeJS后台的Post.Get请求实现. 我是一个略有点讨厌重复使用工具的人,比如这些基本功能完全可以用OC和PHP等替代,但是没办法,现在知识更新的太快啦,Sw ...

  4. WebConfig节点详解

    <!-- Web.config配置文件详解(新手必看) 花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法. 很适合新手参看,由于Web.config在使用很灵活,可 ...

  5. Alpha版本十天冲刺——Day 8

    站立式会议 会议总结 队员 今天完成 遇到的问题 明天要做 感想 鲍亮 无 同时发送图片和其它字段信息(string)到服务器,找不到好方法实现 完成发帖接口 心累,写好了一个传送文件的接口,但是后端 ...

  6. centos搭建https协议的tomcat和apache服务器以及nginx服务器，mysql php

    Apache HTTP Server(简称 Apache)是 Apache 软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广泛使用,是最流行的 Web ...

  7. Git更新到最新版本

    添加git的ppa源sudo apt-add-repository ppa:git-core/ppasudo apt-get updatesudo apt-get upgrade

  8. document.execCommand 常用的方法

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式: document.execCommand(sCommand[,交互方式, 动态参数]) , ...

  9. C#获取C++中修改过的float数组(指针)，dll

    C++中 struct rankPoint{ float sim; }; ]){ ; i < ; i++) prank[i].sim = ; ; i < ; i++) prank[i].s ...

  10. WinForm------Reflector反编译工具下载

    地址: http://www.ddooo.com/softdown/70642.htm