图形展示,往往比数据来的更直观,更耐看。而在众多的图形插件中,Hightcharts算是一个非常不错的插件,支持非常多的种类,比如柱形图,饼图,折线趋势图,二维三维等等,详细内容查看官网是http://www.highcharts.com/
还是看个入门的例子吧,
function chart1(){
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
}
function chart3(){
var option = new Object();
option.chart = new Object();
option.chart.type="bar";
option.chart.renderTo="container";
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];
var chart = new Highcharts.Chart(option);
}
$(function () {
chart1();
//chart3();
});
$(function () {
$('#container1').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]
}]
});
});
放置在浏览器中即可看到效果,需要说明的是highchart一些图形是使用JQuery的,所以对浏览器的支持还是不错的,当然,js引入的时候要注意顺序!!!
相关推荐
highchart
highchart
highchart中文帮助文档
highchart 3 离线 API 完整版
matlab开发-HighChart。使用Matlab的Web浏览器可以轻松使用动态和交互式图表。
highchart使用说明,附加demo代码和使用详细过程。实现动态创建、设置图表数据。
bootstrap+EasyUI+highchart中文参考手册,本人是后端开发,对前端不是很熟悉,所以在做项目的时候采用了这三个技术,因为是框架所以用起来开发前端很方便,果断选择,后端程序员也能开发出漂亮的前端页面了
本人自己封装的jquery工具类,highChart工具类。用于动态创建highChart图表对象。方便扩展,使用
highchart api 文档 。包含所有highchart属性。 属性结构很清晰,方便查找。
highchart api highchart api highchart api highchart api
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
highChart gauge
用HighChart控件实现曲线图
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
highchart的一个例子
highchart折线图,y轴双数据 代码详细注释,使用方便,可直接调用,可灵活布局 欢迎提出宝贵意见https://blog.csdn.net/weixin_43151418
highchart源码
简单的在ext的主布局里添加了highChart后台数据图表。
NULL 博文链接:https://shoushounihao.iteye.com/blog/1771624