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. bzoj3295: [Cqoi2011]动态逆序对（树套树）

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  2. Uva11464 Even Parity

    枚举每个格子的状态显然是不可能的. 思考发现,矩阵第一行的状态确定以后,下面的状态都可以递推出来. 于是状压枚举第一行的状态,递推全图的状态并判定是否可行. /*by SilverN*/ #inclu ...

  3. [NOIP2014] 提高组 洛谷P2312 解方程

    题目描述 已知多项式方程: a0+a1x+a2x^2+..+anx^n=0 求这个方程在[1, m ] 内的整数解(n 和m 均为正整数) 输入输出格式 输入格式: 输入文件名为equation .i ...

  4. Fckeditor PHP/ASP File Upload Vul

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScrip ...

  5. A.Kaw矩阵代数初步学习笔记 9. Adequacy of Solutions

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  6. HDU 5925 Coconuts

    2016 CCPC 东北四省赛 D. 一道好题. 现场写崩了. 赛后LSh跟我讲了一种离散化的做法, 没听懂. 题意 一个\(R \cdot C\ (R, C\le 10^9)\) 的矩形点阵上有 $ ...

  7. FZU 1752 A^B mod C(快速加、快速幂）

    题目链接: 传送门 A^B mod C Time Limit: 1000MS     Memory Limit: 65536K 思路 快速加和快速幂同时运用,在快速加的时候由于取模耗费不少时间TLE了 ...

  8. POJ 1064 Cable master （二分）

    题目链接: 传送门 Cable master Time Limit: 1000MS     Memory Limit: 65536K 题目描述 有N条绳子,它们长度分别为Li.如果从它们中切割出K条长 ...

  9. IOS VFL屏幕自适应

    -(void)fun1{ //注意使用VFL,不用设置视图的frame UIView *view = [[UIView alloc] init]; view.backgroundColor = [UI ...

  10. DS18B20函数库建立实验

    1.主代码: /* 温度传感器  */#include "DS18B20.h"#include"def.h"u16 get_temp (void){    fl ...