$(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>
相关推荐
highstock highcharts
Highstock Demo areaHighstock Demo area
中文版的Highcharts文档(内涵Highstock)
Highstock-1.2.4,3D效果不错,适于初学者~~!免费图表插件,多种图表可选。
Highstock-6.0.2.zip Highstock 是用纯 JavaScript 编写的股票图表控件,可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件:预设置数据时间范围,日期选择器、滚动条、平移、缩放功能。 // jQuery...
Highstock 股票图JS包离线帮助文档。
android调用highstock.js 实现折线图展示,带有样式,横轴数据多时展示横向滚动条
论坛上找的, Highstock与ExtJs完美结合使用,有案例(php),
Highcharts&Highstock中文API PDF,图文报表的pdf,很不错 值得学习一下
highstock 导航轴是时间格式怎么设置.
javascript的Highstock股票实时图,官方包
highstock读取外部文件 可以为多种格式:json、txt、csv等亦可连接数据库,在图表示显示交易信息,判断交易时机
Highstock1.3.2
前端项目-highstock,Highstock允许您用纯JavaScript创建股票或一般的时间线图表,包括复杂的导航选项,如小型导航器系列、预设日期范围、日期选取器、滚动和平移。Highstock不能免费用于商业用途。请参阅以下许可证...
Highstock Chart柱状图展示js文件
Highstock-2.1.9的包,欢迎下载使用。详细的API可以到官网去下载。
highstockAPI文档结合了highcharts的一些功能更加完善了highcharts的功能。
HighchartsPHP, 用于highcharts和 highstock javascript库的php包装器 HighchartsPHPHighchartsPHP是一个PHP库,它作为 Highchart library库的包装,它是以灵活性和可维护性构建的。 它不是JavaScript库的一个简单...
highstock.js
Highstock lets you create stock or general timeline charts in pure JavaScript. Including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and ...