首页 > 代码库 > highcharts基本配置和使用highcharts做手机端图标
highcharts基本配置和使用highcharts做手机端图标
使用highcharts三个理由：
1》手机适配
2》大数据的支持
3》svg的优势
缺点：
不开源、学习资料少
官方有基本的常规用法，一般都是基于jquery写的例子，也可以自己封装函数，用原生来调取，性能简单测试一下，没发现两者有什么大的区别。
heightcharts.js是一些简单图表的框架js,但是要做动态实时数据图
<script src="http://www.mamicode.com/js/jquery-1.7.2.js"></script>
<script src="http://www.mamicode.com/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做手机端图标
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。