$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'//指向的div的id属性
},
exporting: {
enabled: false //是否能导出趋势图图片
},
title:{
text : 'AAPL Stock Price(苹果股价)'//图表标题
},
//X轴上相关的数据选项设置
xAxis: {
tickPixelInterval: 100,//x轴上的间隔
title :{
text:"这里是对X轴的内容进行描述的title信息"
},
type: 'datetime', //定义x轴上日期的显示格式
labels: {
formatter: function() {
var vDate=new Date(this.value);
//alert(this.value);
return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();
},
align: 'center'
}
},
yAxis : {
title: {
text: 'Rate(汇率) Y轴展示' //y轴上的标题
}
},
tooltip: {
xDateFormat: '%Y-%m-%d, %A'//鼠标移动到趋势线上时显示的日期格式
},
rangeSelector: {
buttons: [{//定义一组buttons,下标从0开始
type: 'week',
count: 1,
text: '1w'
},{
type: 'month',
count: 1,
text: '1m'
}, {
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'
}],
selected: 1//表示以上定义button的index,从0开始 ，这里默认选中月
},
series: [{
name: 'USD to EUR(美元对欧元)',//鼠标移到趋势线上时显示的属性名
data: usdeur,//属性值
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
});
$(function () {
var option = new Object();
option.chart = new Object();
option.chart.type="bar";
option.chart.renderTo="container1";
option.title={title:"水果的摄入"};
option.xAxis={categories:['苹果','香蕉','桔子'],gridLineWidth:1};
option.yAxis={title:{text:"吃水果的量"},tickInterval:1};
option.series = new Array();
option.series[0] = new Object();
option.series[0].name="张三";
option.series[0].data=[1,3,5];
option.series[1] = new Object();
option.series[1].name="李四";
option.series[1].data=[6,1,5.5];
option.series[2] = new Object();
option.series[2].name="刘能";
option.series[2].data=[3,1,0.3];
new Highcharts.Chart(option);
});
$(function () {
$('#container2').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
});
<h3 style="text-align:center;">highcharts使用示例</h3>
<div id="container" style="display:inline;width:90%;height:500px;border:1px solid red;">
</div>
<div id="container1" style="display:inline;width:40%;height:500px;border:1px solid red;">
</div>
<div id="container3" style="display:inline;width:6%;height:500px;border:0px;">
</div>
<div id="container2" style="display:inline;width:40%;height:500px;border:1px solid red;">
</div>