关键词:
使用highcharts三个理由:
1》手机适配
2》大数据的支持
3》svg的优势
缺点:
不开源、学习资料少
官方有基本的常规用法,一般都是基于jquery写的例子,也可以自己封装函数,用原生来调取,性能简单测试一下,没发现两者有什么大的区别。
heightcharts.js是一些简单图表的框架js,但是要做动态实时数据图
<script src="js/jquery-1.7.2.js"></script>
<script src="js/highstock.js"></script>
下面是之前工作需求的一些参数,我做一下解释,由于里面参数太多,就不一一做说明。
Highcharts.setOptions({
global: {//由于时间轴的动态数据,需要把时间格式确定一下,utc是国际时间格式,higharts默认是国际,在中国需要GMT,所以这个需要转变为false。
useUTC: false
}
});//获取当前时间
图表配置
$(‘#container‘).highcharts({//jquery选中盒子,并且给盒子加图表,这是基本写法。 chart: {//所有的配置参数都写在chat这个json里面。 events: {//处理一些事件,有click mouseover,load等等,设置其不同的效果,用函数来表达你想要的事件。 load: function () { // 设置图标每秒跟新 var series = this.series[0]; setInterval(function () { var i=0; var x = parseInt((new Date()).getTime()), // 当前时间 y = Math.abs((Math.random()-0.5))*20;//每个点两个值 x和y。 series.addPoint([x, y], true, false);//这是动态增加数据的关键,其实增加的区域在对象series里面。addpoint是其一个方法,如需重新渲染的话用update },3000);}, }, backgroundColor:‘#fff‘,//图表背景色 pinchType:‘‘,// 让在移动端可以滑动 zoomType : ‘‘//点击缩放 里面可以放 y x xy }, colors: [‘#434348‘, ‘#90ed7d‘, ‘#f7a35c‘, ‘#8085e9‘,‘#f15c80‘, ‘#e4d354‘, ‘#8085e8‘, ‘#8d4653‘, ‘#91e8e1‘],//颜色数组,会根据不同的区域自动放不同的颜色,一般在蜡烛图和饼状图效果明显 credits : { // 网站标识 enabled : false//版权为fals 就不会再显示highcharts的logo。 }, navigator : { // 底部导航内容 enabled : false//此处如果为true 就会出现导航,你可以设置下面的效果,让其功能出现,可以拖动缩放突变分辨率 }, scrollbar : { enabled : false//滑动按钮 }, rangeSelector : { enabled : false }, xAxis: {//x轴设置 dateTimeLabelFormats: {//给时间轴格式化,展示你想要的时间效果。 second: ‘D1‘?‘%m-%d‘:‘%H:%M:%S‘, minute: ‘D1‘?‘%m-%d‘:‘%H:%M‘, hour: ‘D1‘?‘%m-%d‘:‘%H:%M‘, day: ‘D1‘?‘%m-%d‘:‘%H:%M‘, week: ‘D1‘?‘%m-%d‘:‘%H:%M‘, month: ‘D1‘?‘%m-%d‘:‘%H:%M‘ }, top:20,//x轴位置 lineColor: ‘#90ed7d‘,//轴线的颜色 lineWidth: 1,//轴线的宽度 type: ‘datetime‘,//声明这是时间轴 tickWidth: 1,//轴上刻度宽度 tickColor: ‘#8085e9‘,//刻度颜色 minRange: 360000,//最小差值,这是以时间戳来计算的 tickInterval:36e5,//显示刻度的位置,也就是隔多少范围显示一个 tickLength:10,//线的长度 labels: {//显示内容的设置,颜色或字体的大小。 style: { color: ‘#000‘, fontSize: ‘8px‘ } }, plotLines: [{//标示线设置。 value: 0, width: 1, color: ‘#808080‘ }] }, yAxis: {//y轴设置 其实与x轴没啥大的区别,就看你想要什么样的效果。 top:20, opposite:true, minorTickInterval:"auto", lineColor: ‘#8085e9‘, lineWidth: 0, tickWidth: 0, tickLength:0, tickColor: ‘#8085e9‘, title: { text: ‘‘ }, labels: { style: { color: ‘#000‘, fontSize: ‘8px‘ } }, plotLines: [{//这块需要重点说一下,指示线需要设置一定的样式,可以设置显示的位置,线型,粗细,长短,字体,以及text标签。 value: 0, color: ‘green‘, dashStyle: ‘LongDashDotDot‘, width: 2, label: { useHTML: true, text: ‘<strong>订单价:‘+0+"</strong>", align:"left" } }] }, plotOptions: {//此处更重要,这是你图表的二次解释说明修改的地方,里面可以根据不同的列表样式来着重说明体现 area: {//面积图的说明 fillColor: {//面积颜色渐变。 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1}, stops: [ [0, ‘#808080‘], [1, Highcharts.Color(‘#808080‘).setOpacity(0).get(‘rgba‘)] ] }, lineWidth: 1, marker: { enabled: false }, shadow: false, states: { hover: { lineWidth: 1 } }, threshold: null }, candlestick: { lineColor: ‘black‘ }, boxplot: { fillColor: ‘#505053‘ } }, series : [{//数据展示的位置, type: ‘M1‘ ?‘area‘:‘candlestick‘, name : ‘ha‘ } ] });
上面是在chart里面动态增加的数据,如果想用ajax或者websocket动态增加数据,还可以这么写
$(function () {
containerPain();//把上面的函数封装 在这儿调用。但是 series是全局变量,需要var 一个。
setInterval(function () {//此处写ajax或者websocket.
var x = (new Date()).getTime(), // current time
y = 44+(rnd(0.5,0.6));
series.addPoint(【x,y】);
}, 1000);
});
Highcharts 日期刻度位置隐藏删除
】Highcharts日期刻度位置隐藏删除【英文标题】:Highchartsdatetickpositionhidingremoving【发布时间】:2013-08-2317:49:09【问题描述】:我已经尝试过使用tickInterval、tickPixelInterval标签格式化程序和tickPositioner的各种组合,但我无法解决这个... 查看详情
highcharts基本配置和使用highcharts做手机端图标
使用highcharts三个理由:1》手机适配2》大数据的支持3》svg的优势缺点:不开源、学习资料少官方有基本的常规用法,一般都是基于jquery写的例子,也可以自己封装函数,用原生来调取,性能简单测试一下,没发现两者有什么大... 查看详情
highchar案例
...t);) //第一步加载静态样式functionshowChat(xlst,ylst)varchart=Highcharts.chart(‘container‘,chart:type:‘spline‘//折线图//type:‘column‘//柱状图,title:text:‘网站每日销售统计图‘,subtitle:text:‘数据来源:后台统计‘,xAxis:categories:xl 查看详情
highcharts标示区曲线图;highcharts对数图表;highcharts时间间隔图表
Highcharts标示区曲线图 配置使用yAxis.plotBands属性来配置标示区。区间范围使用‘from‘和‘to‘属性。颜色设置使用‘color‘属性。标签样式使用‘label‘属性。配置信息:varyAxis={title:{text:‘Windspeed(m/s)‘},min:0,minorGridLineWidt... 查看详情
highcharts选项和参数详细配置查询表
概述:作为一款出色的交互图表制作工具,HighCharts有着全面的选项、参数等配置信息。为了帮助大家进一步掌握HighCharts,今天我们为大家整理了HighCharts的所有配置信息和说明,将其制作成表,供大家查询。文章主要包括highchart... 查看详情
highcharts丢失值区域图;highcharts反转x轴与y轴;highcharts曲线区域图;highcharts区间区域图;highcharts使用区间和线的区域图
Highcharts丢失值区域图chart配置将chart的spacingBottom属性设置为30。表示图表间的间隔区间。varchart={type:‘area‘,spacingBottom:30};实例文件名:highcharts_area_missing.htm<html><head><metacharset="UTF-8"/><title> 查看详情
highcharts基本使用
一、简叙 HighCharts是一个非常强大的画图插件,在以后的工作汇报,数字展示,它将是一把利器。既然是插件,那么就有它的使用规则,我们只需要遵循它的使用规则,就可以画出我们想要的展示效果了。期待吗?好了... 查看详情
highcharts配置
一、基础使用<scriptsrc="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><scriptsrc="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>二、功能模块的使用 功能模块是在Highcharts主要功 查看详情
highcharts环境配置
Highcharts环境配置本章节我们将为大家介绍如何在网页中使用Highcharts。Highcharts依赖于jQuery,所以在加载Highcharts前必须先加载jQuery库。如果你对jQuery不熟悉,可以参阅本站的jQuery教程。安装jQueryjQuery安装可以使用以下两种方式:1... 查看详情
Highcharts 使用 phantomjs 和 highcharts-convert.js 创建带有 html 和 Graphs 的 PDF
】Highcharts使用phantomjs和highcharts-convert.js创建带有html和Graphs的PDF【英文标题】:Highchartswithphantomjsandhighcharts-convert.jstocreatePDFwithhtmlandGraphs【发布时间】:2015-09-1117:53:22【问题描述】:我正在尝试生成一个PDF文件,其中包含Highcharts... 查看详情
使用 php 和 Ajax 的 Highcharts 柱形图
】使用php和Ajax的Highcharts柱形图【英文标题】:HighchartsColumn-chartwithphpandAjax【发布时间】:2014-02-2601:52:25【问题描述】:我对highcharts有疑问,因为我无法在我的highcharts图表上加载我的php数据,当我单击一个表单(id=year)时它将... 查看详情
highcharts纯javascript图表使用讲解
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全。这里,我把Highcharts常用的最核心的参数选项配置整理成文档,与大... 查看详情
如何在反应中使用Highcharts绘制经度和纬度的气泡图
】如何在反应中使用Highcharts绘制经度和纬度的气泡图【英文标题】:HowtodrawabubblemapwithlongitudeandlatitudeusingHighchartsinreact【发布时间】:2021-06-0505:31:14【问题描述】:我想使用Highcharts库在react项目中绘制mapwithbubbles(bubblemap)。... 查看详情
使用内容恢复 GridstackJS 面板(例如 Highcharts)
】使用内容恢复GridstackJS面板(例如Highcharts)【英文标题】:RestoringGridstackJSPanelswithContent(e.g.Highcharts)【发布时间】:2020-04-1223:59:17【问题描述】:我正在构建一个仪表板,您可以在其中使用GridstackJS在网格中添加、删除、移动... 查看详情
Highcharts:可能有多个传说吗?
】Highcharts:可能有多个传说吗?【英文标题】:Highcharts:aremultiplelegendspossible?【发布时间】:2013-04-2717:24:05【问题描述】:我是Highcharts的新手,到目前为止它看起来很棒。但是,我需要在图例中将我的六个系列分成三列。这可... 查看详情
Highcharts:如何更改文本和背景颜色
】Highcharts:如何更改文本和背景颜色【英文标题】:Highcharts:howtochangetextandbackgroundcolors【发布时间】:2018-09-1622:43:52【问题描述】:我是Highcharts的新手,我正在使用一个非常简单的Highcharts条形图,它显示了水平堆叠的两列。我... 查看详情
highcharts图表插件的简单使用说明
Highcharts图表控件是眼下使用最为广泛的图表控件。本文将从零開始逐步为你介绍Highcharts图表控件。通过本文。你将学会怎样配置Highcharts以及动态生成Highchart图表。 Highcharts是一个很... 查看详情
Highcharts:使用 JSON 数据创建多个系列,将我的月份和年份分组
】Highcharts:使用JSON数据创建多个系列,将我的月份和年份分组【英文标题】:Highcharts:createmultipleseriesgroupedmymonthandyearusingJSONdata【发布时间】:2019-12-0906:25:48【问题描述】:我正在尝试使用JSON数据创建折线图。我想要多个系列... 查看详情