highstocks.js使用指南
Highcharts.setOptions({
lang: {
rangeSelectorFrom:"从", //全局设置语言中文
rangeSelectorTo:"至",
rangeSelectorZoom:"渠道",
shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
} ,
chart: { //全局配置 resetZoomButton与下面的buttonTheme类似
borderWidth: 0,
// marginBottom: 65,
// marginTop: 50,
// marginRight: 20,
// zoomType: 'x',
selectionMarkerFill : 'rgba(122, 201, 67, 0.25)',
style:{
fontFamily: 'Tahoma, "microsoft yahei", 微软雅黑, 宋体;'
},
resetZoomButton: {
theme: {
fill: 'white',
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
}
}
}
}
}
},
});
$('#container').highcharts('StockChart', { //也可以写成var chart1 = new Highcharts.StockChart({ 后面chart中定义chart: {renderTo: 'container'}必须是id值
rangeSelector : {
selected : 1, //zoom默认第几个图标显示，从0开始
buttons: [{ //设置zoom
type: 'day',
count: 7,
text: '7d'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
buttonTheme: { // zoom按钮的样式，和hover时的样式
fill: 'none',
stroke: 'none',
'stroke-width': 0, //zoom按钮框的边框值
r: 8, //zoom按钮的radius值
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: 'gray', //时段框的设置
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: { //时段框里面字的设置
color: '#f00',
fontWeight: 'bold'
},
labelStyle: { //zoom 和from to 字样式设置
color: '#f00',
fontWeight: 'bold'
},
},
title : {
text : 'AAPL Stock Price' //标题
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式
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'
}
},
series: [{
name: 'USD to EUR',
data: usdeur //数据可以从js中获得http://www.highcharts.com/samples/data/usdeur.js
}]
将stock当成highchart使用 同一个页面同时使用2个js时报错
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
navigator: {
enabled: false
},
数据来源 Json
$.getJSON('/demo/json/highstock-basic-data.json', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data.data,
tooltip: {
valueDecimals: 2
}
}]
});
});
