- 浏览: 297670 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
全站唯一是我么:
请问下该功能的jdk版本是1.4的么,还是以上的?
Java实现给图片添加水印 -
Janne:
请问,你解决这问题没?是怎么回事?我今天也遇到了,没解决
myeclipse6.5中使用jax-ws启动tomcat报错问题 -
xuedong:
studypi 写道你是怎么和新浪的技术联系的?能告诉一下我吗 ...
新浪微博第三方接口调用学习 -
studypi:
你是怎么和新浪的技术联系的?能告诉一下我吗,谢谢
新浪微博第三方接口调用学习 -
dove19900520:
有用,呵呵
IE,Firefox都不放弃(兼容性问题总结)
highcharts是一个纯js图表工具,浏览器兼容也挺好,支持大部分的图表类型,如直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图等。需要导入三个js包,jquery.min.js,highcharts.js,exporting.js。其中highcharts.js是核心库,需要依赖jquery.min.js,exporting.js是支持打印的,可以不要。另外页面上需要有个div,用于接收图片。
呵呵,经ganjp 同学提醒,想起来,这个如果商用的话是收费的。
以下是几个从官网拿下来的效果图和代码
1.线状图
var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container',//这个是与页面的div 的id对应的,例如<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> defaultSeriesType: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); });
2.区域图
var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'area' }, title: { text: 'US and USSR nuclear stockpiles' }, subtitle: { text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+ 'thebulletin.metapress.com</a>' }, xAxis: { labels: { formatter: function() { return this.value; // clean, unformatted number for year } } }, yAxis: { title: { text: 'Nuclear weapon states' }, labels: { formatter: function() { return this.value / 1000 +'k'; } } }, tooltip: { formatter: function() { return this.series.name +' produced <b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x; } }, plotOptions: { area: { pointStart: 1940, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }, series: [{ name: 'USA', data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ] }, { name: 'USSR/Russia', data: [null, null, null, null, null, null, null , null , null ,null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000] }] }); });
3.柱状图
/** * Visualize an HTML table using Highcharts. The top (horizontal) header * is used for series names, and the left (vertical) header is used * for category names. This function is based on jQuery. * @param {Object} table The reference to the HTML table to visualize * @param {Object} options Highcharts options */ Highcharts.visualize = function(table, options) { // the categories options.xAxis.categories = []; $('tbody th', table).each( function(i) { options.xAxis.categories.push(this.innerHTML); }); // the data series options.series = []; $('tr', table).each( function(i) { var tr = this; $('th, td', tr).each( function(j) { if (j > 0) { // skip first column if (i == 0) { // get the name and init the series options.series[j - 1] = { name: this.innerHTML, data: [] }; } else { // add values options.series[j - 1].data.push(parseFloat(this.innerHTML)); } } }); }); var chart = new Highcharts.Chart(options); } // On document ready, call visualize on the datatable. $(document).ready(function() { var table = document.getElementById('datatable'), options = { chart: { renderTo: 'container', defaultSeriesType: 'column' }, title: { text: 'Data extracted from a HTML table in the page' }, xAxis: { }, yAxis: { title: { text: 'Units' } }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.y +' '+ this.x.toLowerCase(); } } }; Highcharts.visualize(table, options); });
4.饼状图
var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2010' }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: Highcharts.theme.textColor || '#000000', connectorColor: Highcharts.theme.textColor || '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); });
5.饼图,线图,柱状图在同一界面
var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, title: { text: 'Combination chart' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'] }, tooltip: { formatter: function() { var s; if (this.point.name) { // the pie chart s = ''+ this.point.name +': '+ this.y +' fruits'; } else { s = ''+ this.x +': '+ this.y; } return s; } }, labels: { items: [{ html: 'Total fruit consumption', style: { left: '40px', top: '8px', color: 'black' } }] }, series: [{ type: 'column', name: 'Jane', data: [3, 2, 1, 3, 4] }, { type: 'column', name: 'John', data: [2, 3, 5, 7, 6] }, { type: 'column', name: 'Joe', data: [4, 3, 3, 9, 0] }, { type: 'spline', name: 'Average', data: [3, 2.67, 3, 6.33, 3.33] }, { type: 'pie', name: 'Total consumption', data: [{ name: 'Jane', y: 13, color: highchartsOptions.colors[0] // Jane's color }, { name: 'John', y: 23, color: highchartsOptions.colors[1] // John's color }, { name: 'Joe', y: 19, color: highchartsOptions.colors[2] // Joe's color }], center: [100, 80], size: 100, showInLegend: false, dataLabels: { enabled: false } }] }); });
highcharts官网:http://www.highcharts.com/
欢迎查看本人博客:www.java.hourb.com
- highcharts.rar (55.1 KB)
- 下载次数: 73
评论
3 楼
xuedong
2012-04-25
huzhiyong56 写道
我如果就放到我的门户网站上?这种要收费吗?
呵呵,我也不知道
2 楼
huzhiyong56
2012-04-24
我如果就放到我的门户网站上?这种要收费吗?
1 楼
ganjp
2011-07-05
商用要钱
发表评论
-
js在Replace中使用正则
2012-08-13 13:37 973replace方法的语法是:str ... -
js中获取时间new Date()详细介绍
2011-09-23 20:37 1448var myDate = new Date(); myDate ... -
全面理解javascript的caller,callee,call,apply概念(修改版)
2011-09-05 18:16 862在提到上述的概念之前,首先想说说javascript中函数的隐 ... -
jquery的live绑定事件,不知道是不是jquery的bug
2011-09-05 18:03 1719今天无意中发现,级联菜单中,select的onchange事 ... -
JS删除数组元素
2011-09-02 14:55 1608、JS删除数组元素 view ... -
js 判断某个方法是否存在
2011-08-25 19:59 1217function fnExist(fnName) { ... -
正则表达式常用验证
2011-08-24 12:20 856在前台很多地方需要验证输入格式,为了方便以后使用,把常用的整理 ... -
勿重复检测浏览器
2011-08-19 09:53 865拿添加事件示例 Js代码 // ... -
学习Javascript闭包(Closure)
2011-08-12 18:10 896闭包(closure)是Javas ... -
深入理解Javascript闭包 .
2011-08-12 17:56 667最近在网上查阅了不少Javascript闭包(closu ... -
IE,Firefox都不放弃(兼容性问题总结)
2011-08-11 16:00 1339下面是Javascript的IE和Fire ... -
jquery ul li mouseout 事件冒泡的bug
2011-08-11 15:48 2636今天碰到个jquery的mouseout事件的问题,弄了半天 ... -
onchange,onpropertychange,oninput键盘输入和js赋值时区别
2011-08-10 15:32 3836最近项目中需要用到文本框中值改变时触发某个事件,第一反应就是 ... -
JavaScript中setAttribute用法
2011-08-10 11:30 1085我们经常需要在JavaScript中给Element动态 ... -
window.location.hash属性介绍
2011-08-08 17:52 885window.location.hash属性介绍 ... -
给页面加速,干掉Dom Level 0 Event
2011-08-08 11:50 907现在的web应用越来越 ... -
关于图片的预加载,你所不知道的
2011-08-08 11:36 923看完了曼联与曼城的同城德比,还有漫长的两个小时,才能看到期 ... -
js判断图片是否被缓存
2011-08-05 17:35 2255在ie8下测试是可以的,别的没测。有用到的可以自己测试下,呵 ... -
javascript文件在IE缓存中的迷惑与解惑实验
2011-08-05 17:12 1363javascript文件在IE缓存中的迷惑与解惑实验 缓 ... -
highcharts实现雷达图效果
2011-08-03 11:00 11865最近项目中用到了雷达图,自己在那鼓捣了一顿总算出来一个雏形, ...
相关推荐
Highcharts是一款广受欢迎的JavaScript库,用于创建美观且交互式的数据可视化图表。它以其灵活性、易用性和丰富的功能集而闻名,使得Web开发者无需深厚的图形设计背景也能制作出专业级别的图表。在本篇文章中,我们...
HighCharts数据统计图表制作插件,数据显示不直观,需要用图表来展示数据的话,HighCharts是一个很好的插件,简单易用,图表漂亮,下载附件,里面有各种图表的例子,相信你不会失望!感谢支持...
"可以很漂亮"这一点强调了Highcharts的美观性。Highcharts提供了丰富的自定义选项,可以调整颜色、样式、字体、动画效果等,使得图表不仅具备实用性,也具有良好的视觉吸引力。这对于吸引用户的注意力和提升网站的...
除了提供漂亮的 OO 界面来创建图表外,它还通过添加诸如“粘滞键”之类的有用工具来扩展功能###Sticky Keys 粘滞键是一种配置选项,允许您始终对某些键使用相同的颜色。 例如,在绘制苹果与橙子的图表时,您可能...
在运维工作总很多数据最终的展现方式要用到图表,毕竟用图来展示要比一堆数字更直观些,比如利用率、站点的PV,UV等,大家千万不要觉得看到很多漂亮的图就感觉很难,其实真心不是,因为现在有很多前端的绘图库,你只...
- **交互性**:由于底层依赖于像Highcharts、Chart.js这样的成熟图表库,React Chartkick的图表也具有良好的交互性,如缩放、平移、点击事件等。 - **数据驱动**:通过React的状态和属性管理数据,图表会自动根据...
8. Highcharts:Highcharts是一个纯JavaScript编写的图表库,它提供了在网站或web应用中添加交互式图表的简便方法,支持多种图表类型。 9. Flot:Flot是专为jQuery设计的一个纯JavaScript绘图库,特点是易于使用,...
Highcharts是一款广泛应用于网页开发中的JavaScript库,专用于创建高质量、互动式的统计图表。这个库在3.0.1版本中提供了丰富的图表类型和高度定制化的选项,使得开发者能够轻松地将复杂的数据可视化,为用户提供...
Highcharts是一款功能强大的JavaScript图表库,它被广泛用于创建数据可视化应用,特别是在Web开发中。这个库以其易用性、丰富的图表类型和高度定制性而备受赞誉。在描述中提到,Highcharts支持导出图片和打印功能,...
Highcharts是一款功能强大且广泛应用的图表库,今天我们来讨论如何使用Highcharts创建一个漂亮的仪表盘。仪表盘是Highcharts中的一种特殊图表类型,用于展示某个指标的当前状态或进度。 标题和描述 从标题和描述中...
1. **Highcharts**:这是一个功能强大的图表库,支持多种图表类型,包括动态图表,且具有高度的可定制性。 2. **Chart.js**:轻量级的图表库,适合快速创建简单、美观的图表,特别适合移动设备。 3. **Flot**:...
4. 图表样式:通过CSS和JavaScript,可以定制图表的颜色、线型、背景、标注等视觉效果,使其看起来“非常漂亮”。 在提供的文件中,`index.html`可能是包含图表展示的HTML页面,它可能包含了`<canvas>`元素以及其他...
"图表"部分则可能使用了如Chart.js或Highcharts等图表库,这些图表库能够生成各种类型的统计图,如柱状图、饼图、线图等,帮助管理员直观地理解数据和系统状态。 "全屏"功能则意味着这个模板可以扩展到全屏模式,...
在 highcharts 中呈现的 pywws 图表 这是我在用来生成天气图的代码。 点击查看截图,或为我的活生生的例子。 气象站插入 Linux 机器,该机器运行以将数据从 USB 线上拉出并通过一系列模板运行。 我只是定义了几个...
通过集成流行的JavaScript图表库,如Highcharts、Google Charts和Plotly,Chartkick提供了丰富的图表类型,包括柱状图、饼图、线形图等,以满足各种数据展示需求。 在JavaScript开发中,数据可视化是一个关键的领域...
OpenFlashChart是用于生成Flash图表的组件,它提供了丰富的图表类型以及漂亮的展示效果。它适合在需要Flash支持的场合使用。 3. JFreeChart JFreeChart是一个主要用来生成各种类型图表的Java图表库,包括饼图、柱状...
标题中的“highChart控件”指的是Highcharts,一个流行的JavaScript图表库,用于在网页上创建交互式的图表。Highcharts以其丰富的图表类型、良好的性能和易用性受到开发者的青睐。它支持各种图表类型,包括折线图、...
"里面还有一个漂亮的拾色器"提示我们,这个图表实例可能包含了色彩选择工具,使得用户可以方便地为图表元素挑选合适的颜色。这对于提升用户体验和视觉效果非常重要,尤其是在制作多色图表或需要用户自定义颜色的场景...
该模块通过创建典型的perl对象并设置适当的属性,简化了获得漂亮图表的过程。 用法 use JS::HighCharts my $hc = JS::HighCharts -> new( lib_src => [ ], # parameters ); 设置对象后,您将通过调用方法来...