首页 > 代码库 > highcharts与highstock实例
highcharts与highstock实例
- <head>
- <title>highcharts报表示例</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
- <script type="text/javascript" src=http://www.mamicode.com/"./js/jquery.min.js"></script>
- <script type="text/javascript">
- $(function () {
- var chart;
- $(document).ready(function() {
- /**
- * highcharts数据图表
- *
- * @param {object} chart 图表的相关参数配置
- * @param {object} credits 图表版权信息参数配置
- * @param {object} lang 图表语言参数配置
- * @param {object} exporting 导出配置
- * @param {object} title 标题配置
- * @param {object} xAxis X轴配置
- * @param {object} yAxis Y轴配置
- * @param {object} plotOptions 各类型图表绘制配置
- * @param {object} labels 数据图表标签配置
- * @param {array} series 数据源配置
- */
- chart = new Highcharts.Chart({
- /**
- * 图表配置
- *
- * @param {string} renderTo 图表加载的位置
- * @param {int} width 图表的宽度
- * @param {int} hight 图表的高度
- * @param {string} type 图表的默认类型
- * @param {string} zoomType 图表的缩放选项,有:x, y, xy
- */
- chart: {
- // 图表加载的位置
- renderTo: ‘container‘,
- // 图表宽度
- width: 600,
- // 图表高度
- hight: 500,
- // 默认图表类型
- type: ‘line‘,
- // 缩放配置:x,y,xy
- zoomType: ‘‘
- },
- /**
- * 版权信息配置,不用修改直接复制
- *
- * @param {boolean} enabled 是否显示版权信息
- * @param {string} href 版权信息所链接到的地址
- * @param {string} text 版权信息所显示的文字内容
- */
- credits:{
- enabled: false,
- href: "http://www.msnui.tk/Admin",
- text: ‘微源网络科技‘
- },
- /**
- * 语言配置,不用修改直接复制
- *
- * @param {string} exportButtonTitle 导出按钮的标题文字
- * @param {string} printButtonTitle 打印按钮的标题文字
- */
- lang:{
- exportButtonTitle:‘导出PDF‘,
- printButtonTitle:‘打印报表‘
- },
- /**
- * 导出配置,不用修改直接复制
- *
- * @param {boolean} enabled 是否允许导出
- * @param {object} buttons 关于与导出和打印按钮相关的配置对象
- * @param {string} filename 导出文件的文件名
- * @param {string} type 默认导出文件的格式
- */
- exporting:{
- // 是否允许导出
- enabled:true,
- // 按钮配置
- buttons:{
- // 导出按钮配置
- exportButton:{
- menuItems: null,
- onclick: function() {
- this.exportChart();
- }
- },
- // 打印按钮配置
- printButton:{
- enabled:false
- }
- },
- // 文件名
- filename: ‘报表‘,
- // 导出文件默认类型
- type:‘application/pdf‘
- },
- /**
- * 图表的标题
- *
- * @param {string} text 图表的标题,如果不需要显示标题,直接设置为空字符串就行
- */
- title: {
- text: ‘联合图表实例‘
- },
- /**
- * X轴配置
- *
- * @param {array} categories X轴坐标分类值
- * @param {object} labels 坐标标签配置对象
- * @param {int} tickInterval 坐标轴的步进值
- * @param {object} title 坐标轴标题
- */
- xAxis: {
- // X轴分类
- categories: [‘苹果‘, ‘桔子‘, ‘梨子‘, ‘香蕉‘, ‘李子‘],
- // 坐标轴的标签
- labels:{
- // 标签位置
- align: ‘center‘,
- // 标签格式化
- formatter: function(){
- return this.value;
- },
- // 标签旋转度数
- rotation: 20,
- // 标签交错显示的行数
- staggerLines: 1
- },
- // X轴的步进值,决定隔多少个显示一个
- tickInterval: 1,
- // 坐标轴标题
- title: {
- text: ‘水果分类‘
- }
- },
- /**
- * y轴配置
- *
- * @param {object} labels 坐标标签配置对象
- * @param {int} tickInterval 坐标轴的步进值
- * @param {object} title 坐标轴标题
- */
- yAxis: {
- // 坐标轴的标签
- labels:{
- // 标签位置
- align: ‘right‘,
- // 标签格式化
- formatter: function(){
- return this.value + ‘个‘;
- }
- },
- // y轴的步进值,决定隔多少个显示一个
- tickInterval: 3,
- // 坐标轴标题
- title: {
- text: ‘水果个数‘
- }
- },
- /**
- * 绘图的各选项、参数配置
- * @param {object} series 数列,可以配置各种不同类型图表的默认参数
- * @param {object} bar 横向柱状图配置参数
- * @param {object} column 纵向柱状图配置参数
- * @param {object} line 线性图
- * @param {object} spline 圆滑曲线图配置参数
- * @param {object} pie 饼状图
- */
- plotOptions:{
- /**
- * 数列,对于所有的图表都可以适用的配置参数,属于共用性质。
- */
- series: {
- // 鼠标样式
- cursor: ‘pointer‘,
- events:{
- // 数据标注不可点击
- legendItemClick: false
- },
- // 当是柱状图时,柱状的宽度
- pointWidth: 15
- },
- /**
- * 横向柱状图
- */
- bar:{
- // 数据点的点击事件
- events:{
- click: function(event){
- //alert(‘The bar was clicked, and you can add any other functions.‘);
- }
- },
- // 当值为0时,在图表中柱状体的长度设置
- minPointLength: 2,
- // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
- point:{
- events:{
- click: function(){
- //alert(‘This point was clicked. You can and any other functions.‘);
- }
- }
- },
- // 是否在图注中显示。
- showInLegend: true,
- // 是否堆叠,默认:null,数值:normal,百分比:percent
- //stacking: ‘normal‘,
- // 调整图像顺序关系
- zIndex: 1
- },
- /**
- * 纵向柱状图
- */
- column:{
- // 数据点的点击事件
- events:{
- click: function(event){
- //alert(‘The bar was clicked, and you can add any other functions.‘);
- }
- },
- // 当值为0时,在图表中柱状体的长度设置
- minPointLength: 2,
- // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
- point:{
- events:{
- click: function(){
- //alert(‘This point was clicked. You can and any other functions.‘);
- }
- }
- },
- // 是否在图注中显示。
- showInLegend: true,
- // 是否堆叠,默认:null,数值:normal,百分比:percent
- //stacking: null,
- // 调整图像顺序关系
- zIndex: 2
- },
- /**
- * 线性图,与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
- */
- line:{
- // 允许线性图上的数据点进行点击
- allowPointSelect: true,
- // 数据点的点击事件
- events:{
- click: function(event){
- //alert(‘The bar was clicked, and you can add any other functions.‘);
- }
- },
- // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
- point:{
- events:{
- click: function(){
- //alert(‘This point on the line was clicked. You can and any other functions.‘);
- }
- }
- },
- // 是否在图注中显示。
- showInLegend: true,
- // 调整图像顺序关系
- zIndex: 3
- },
- /**
- * 曲线图,与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
- */
- spline:{
- // 允许线性图上的数据点进行点击
- allowPointSelect: true,
- // 数据点的点击事件
- events:{
- click: function(event){
- //alert(‘The bar was clicked, and you can add any other functions.‘);
- }
- },
- // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
- point:{
- events:{
- click: function(){
- //alert(‘This point on the line was clicked. You can and any other functions.‘);
- }
- }
- },
- // 是否在图注中显示。
- showInLegend: true,
- // 调整图像顺序关系
- zIndex: 3
- },
- /**
- * 饼状图
- */
- pie:{
- // 是否允许扇区点击
- allowPointSelect: true,
- // 点击后,滑开的距离
- slicedOffset: 5,
- // 饼图的中心坐标
- center: [100, 80],
- // 饼图的大小
- size: 100,
- // 数据标签
- dataLabels: {
- // 是否允许标签
- enabled: true,
- // 标签与图像元素之间的间距
- distance: 10
- },
- // 数据点的点击事件
- events:{
- click: function(event){
- //alert(‘The bar was clicked, and you can add any other functions.‘);
- }
- },
- // 是否忽略隐藏的项
- ignoreHiddenPoint: true,
- // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
- point:{
- events:{
- click: function(){
- //alert(‘This point on the line was clicked. You can and any other functions.‘);
- }
- }
- },
- // 是否在图注中显示。
- showInLegend: false,
- // 调整图像顺序关系
- zIndex: 0
- }
- },
- /**
- * 数据图表标签配置
- *
- * @param {array} items 项目配置
- */
- labels: {
- items: [{
- html: ‘水果总消耗量‘,
- style: {
- left: ‘65px‘,
- top: ‘8px‘,
- color: ‘black‘
- }
- }]
- },
- /**
- * 数据源配置,本身是一个对象数组
- *
- * @param {string} type 图表的类型
- * @param {string} name 数据序列的名称
- * @param {array} data 数据序列,是一个对象数组
- */
- series: [{
- type: ‘column‘,
- name: ‘Jane‘,
- data: [3, 2, 1, 3, 4]
- }, {
- type: ‘column‘,
- name: ‘John‘,
- data: [2, 3, 5, 7, 6]
- }, {
- type: ‘column‘,
- name: ‘Joe‘,
- data: [4, 3, 3, 9, 0]
- }, {
- type: ‘spline‘,
- name: ‘平均‘,
- data: [3, 2.67, 3, 6.33, 3.33]
- }, {
- type: ‘pie‘,
- name: ‘水果总消耗量‘,
- data: [{
- name: ‘Jane‘,
- y: 13,
- color: ‘#4572A7‘ // Jane‘s color
- }, {
- name: ‘John‘,
- y: 23,
- color: ‘#AA4643‘ // John‘s color
- }, {
- name: ‘Joe‘,
- y: 19,
- color: ‘#89A54E‘ // Joe‘s color
- }]
- }]
- });
- });
- });
- </script>
- </head>
- <body>
- <script src=http://www.mamicode.com/"./js/highcharts/highcharts.js"></script>
- <script src=http://www.mamicode.com/"./js/highcharts/modules/exporting.js"></script>
- <div id="container"></div>
- </body>
- </html>
2. highstock实例代码,其中导出功能配置了本地化,用的是exporting中的导出接口。
[html] view plain copy
- <html>
- <head>
- <title>highstock报表示例</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
- <script type="text/javascript" src=http://www.mamicode.com/"./js/jquery.min.js"></script>
- <!-- 源数据 -->
- <script type="text/javascript" src=http://www.mamicode.com/"./js/usdeur.js"></script>
- <script type="text/javascript">
- //图表
- $(function() {
- /**
- * highstock数据图表
- *
- * @param {object} chart 图表的相关参数配置
- * @param {object} credits 图表版权信息参数配置
- * @param {object} lang 图表语言参数配置
- * @param {object} exporting 导出配置
- * @param {object} title 标题配置
- * @param {object} xAxis X轴配置
- * @param {array} series 数据源配置
- */
- var chart1 = new Highcharts.StockChart({
- /**
- * 图表配置
- *
- * @param {string} renderTo 图表加载的位置
- * @param {int} width 图表的宽度
- * @param {int} hight 图表的高度
- */
- chart: {
- renderTo: ‘container‘,
- // 图表宽度
- width: 700,
- // 图表高度
- hight: 500
- },
- /**
- * 版权信息配置,不用修改直接复制
- *
- * @param {boolean} enabled 是否显示版权信息
- * @param {string} href 版权信息所链接到的地址
- * @param {string} text 版权信息所显示的文字内容
- */
- credits:{
- enabled: false,
- href: "http://www.msnui.tk/Admin",
- text: ‘微源网络科技‘
- },
- /**
- * 语言配置,不用修改直接复制
- *
- * @param {array} months 配置月份语言
- * @param {array} shortMonths 配置短月份
- * @param {array} weekdays 配置星期
- * @param {string} exportButtonTitle 导出按钮的标题文字
- * @param {string} printButtonTitle 打印按钮的标题文字
- */
- lang:{
- months: [‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘, ‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一月‘, ‘十二月‘],
- shortMonths: [‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘, ‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一‘, ‘十二‘],
- weekdays: [‘星期天‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘],
- exportButtonTitle:‘导出PDF‘,
- printButtonTitle:‘打印报表‘
- },
- /**
- * 导出配置,不用修改直接复制
- *
- * @param {boolean} enabled 是否允许导出
- * @param {object} buttons 关于与导出和打印按钮相关的配置对象
- * @param {string} filename 导出文件的文件名
- * @param {string} type 默认导出文件的格式
- */
- exporting:{
- // 是否允许导出
- enabled:true,
- // 按钮配置
- buttons:{
- // 导出按钮配置
- exportButton:{
- menuItems: null,
- onclick: function() {
- this.exportChart();
- }
- },
- // 打印按钮配置
- printButton:{
- enabled:false
- }
- },
- // 文件名
- filename: ‘报表‘,
- // 配置导出接口
- url: ‘http://‘ + location.hostname + ‘/test/Highcharts-2.3.2/example/exporting/index.php‘,
- // 导出文件默认类型
- type:‘application/pdf‘
- },
- /**
- * 图表的标题
- *
- * @param {string} text 图表的标题,如果不需要显示标题,直接设置为空字符串就行
- */
- title: {
- text: ‘图表实例标题‘
- },
- /**
- * 域选择配置
- *
- * @param {array} buttons 缩放选择按钮
- * @param {int} selected 默认选择缩放按钮中的第几个
- * @param {boolean} inputEnabled 是否允许input标签选框
- */
- rangeSelector: {
- // 缩放选择按钮,是一个数组。
- // 其中type可以是: ‘millisecond‘, ‘second‘, ‘minute‘, ‘day‘, ‘week‘, ‘month‘, ‘ytd‘ (year to date), ‘year‘ 和 ‘all‘。
- // 其中count是指多少个单位type。
- // 其中text是配置显示在按钮上的文字
- buttons: [{
- type: ‘month‘,
- count: 1,
- text: ‘1月‘
- }, {
- type: ‘month‘,
- count: 3,
- text: ‘3月‘
- }, {
- type: ‘month‘,
- count: 6,
- text: ‘6月‘
- }, {
- type: ‘year‘,
- count: 1,
- text: ‘1年‘
- },{
- type: ‘year‘,
- count: 3,
- text: ‘3年‘
- }, {
- type: ‘all‘,
- text: ‘所有‘
- }],
- // 默认选择域:0(缩放按钮中的第一个)、1(缩放按钮中的第二个)……
- selected: 1,
- // 是否允许input标签选框
- inputEnabled: false
- },
- /**
- * 气泡示说明标签
- *
- * @param {string} xDateFormat 日期时间格式化
- */
- tooltip:{
- // 日期时间格式化
- xDateFormat: ‘%Y-%m-%d %A‘
- },
- /**
- * X轴坐标配置
- *
- * @param {object} dateTimeLabelFormats x轴日期时间格式化,不用修改直接使用
- */
- xAxis:{
- // 如果X轴刻度是日期或时间,该配置是格式化日期及时间显示格式
- dateTimeLabelFormats: {
- second: ‘%Y-%m-%d<br/>%H:%M:%S‘,
- minute: ‘%Y-%m-%d<br/>%H:%M‘,
- hour: ‘%Y-%m-%d<br/>%H:%M‘,
- day: ‘%Y<br/>%m-%d‘,
- week: ‘%Y<br/>%m-%d‘,
- month: ‘%Y-%m‘,
- year: ‘%Y‘
- }
- },
- /**
- * 数据源配置,本身是一个对象数组
- *
- * @param {string} name 数据序列的名称
- * @param {array} data 数据序列,是一个对象数组。data的结构:[[时间戳, 值], [时间戳, 值], [时间戳, 值], ……]
- */
- series: [{
- name: ‘数据名称‘,
- data: usdeur
- }]
- });
- });
- </script>
- </head>
- <body>
- <script src=http://www.mamicode.com/"./js/highstock/highstock.js"></script>
- <script src=http://www.mamicode.com/"./js/highstock/modules/exporting.js"></script>
- <div id="container"></div>
- </body>
- </html>
highcharts与highstock实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。