js图表-Highcharts
文章平均质量分 94
OkidoGreen
这个作者很懒,什么都没留下…
展开
-
google的Google Chart Tools太酷了
图形是我们最经常看见和使用的东西。但要自己写代码实现一个图形还不是那么简单。比如Excel的图形,PDF中的图形,网页上的图形。方式很多,实现方法也不一样。看看google的网页上面显示的图形,真的很漂亮。看看下面的这个图形的代码。代码:[html]view plaincopyprint?html转载 2014-04-30 09:22:46 · 2404 阅读 · 0 评论 -
Hightchart 实现 polar 雷达图
需要多引入一个highchart-more.js推荐一个在线编辑的网站:http://code.hcharts.cn/demos/hhhhig$(function () { $('#container').highcharts({ chart: { polar: true, type: 'line'转载 2015-08-22 21:36:15 · 9544 阅读 · 0 评论 -
highcharts的封装与使用!
使用环境:struts2 json使用目的:统计图流程:只需要在jsp页面配置,就能实现数据的线状图,柱状图,饼状图的统计一个例子:1.JSP页面:"text/html; charset=utf-8" %>html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" cont转载 2014-12-15 21:10:07 · 2550 阅读 · 0 评论 -
highcharts图表合唱篇:如何结合Renderer.circle渲染类实现一些无厘头的需求如圆环内环颜色填充
今天与群里的大伙弄了一个很有意思的东西。这个有意思的东西来源于一个想借用饼状图pie实现一个环形图,且环形图内环需要设置一个颜色,另外显示最小块的百分比在内环内。至于如何在饼状图的基础上弄成环形图前面已经写了一篇相关性的文章,请参考:http://www.stepday.com/topic/?739。接着我们就来聊聊重点地方吧。1、如何将最小块的百分比显示在内环中1)、我们如何才能转载 2014-12-14 19:36:04 · 6674 阅读 · 0 评论 -
HighCharts之2D圆环图 donut
1、实例源码Donut.html:HighCharts 2D圆环图 $(function(){ var colors = Highcharts.getOptions().colors, categories = ['花', '树', '鱼', '鸟', '鲸'], name = 'Browser brands'转载 2014-12-14 19:12:02 · 3947 阅读 · 0 评论 -
sparkline highcharts 组合使用
highcharts插件js:/** * Created by yaung on 2014/12/20. */(function($){ $.extend({ getStartAngle : function (value,control) { if(value == control){ return 90;原创 2015-01-27 13:22:55 · 4610 阅读 · 0 评论 -
Highcharts绘制直线图
1.Highcharts简介Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts界面美观,由于使用JavaScript编写,所以不需要像Fl转载 2014-02-12 15:36:26 · 3479 阅读 · 0 评论 -
Highcharts绘制饼图
1、使用Highcharts制作饼图的效果图如下:2、对应的JavaScript代码---pie-chart.js如下:[javascript] view plaincopy$(function () { var chart; var totalMoney=50000 $(docu转载 2014-02-12 15:37:59 · 3596 阅读 · 3 评论 -
Highcharts图表结构分析:详解坐标轴及其类型
Highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过chart.inverted = true 可以让x,y轴显示位置对调。下图为图表中坐标轴组成部分。一、坐标轴组成部分轴标题-Axis Title坐标轴标题。默认情况下,x轴为null(也就是没有title),y轴为'转载 2014-03-05 11:43:45 · 5024 阅读 · 0 评论 -
Highchart legend属性 实现翻页显示效果,解决legend过长
legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', y: 30, navigation: { activeColor: 'red',animation: t转载 2014-02-26 06:47:59 · 5812 阅读 · 3 评论 -
基于Highcharts绘制差值连接线
话说图形我们一般用于了解趋势, 快速定位问题所在, 但想要对数值进行精确评估, 还是直白的表格 + 数字好了.但这样问题就来了, 如果我们既想了解趋势, 又想了解具体数值的差异, 那该怎么办呢?是用柱状图 + 表格吗?我觉得还是这样的好! 让用户选择图形上的点, 自动比较两点的差值, 给用户最直观的感受.between-points ex转载 2014-03-03 16:45:35 · 1859 阅读 · 0 评论 -
highChart另类使用及一些属性
效果图:具体代码:包括背景透明,图表中载入图片等;function showPie(name){ var a = [ {name:'A',y:100,href:'http://www.baidu.com',color:'#D587CE'}, {name:'B',y:30,href:'http原创 2013-11-26 20:00:18 · 2041 阅读 · 0 评论 -
HighCharts 非规律日期 多条曲线的 绘画
项目中需要为A,B 2个元素 绘出统计值的曲线,但A与B 的 时间点 并不一致,查找HighCharts API后 ,发现了解决方法$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container' },原创 2013-03-08 16:25:07 · 8456 阅读 · 0 评论 -
highchart插件属性说明
一.chart的部分相关属性说明 renderTo: 'container', //图表的页面显示容器(也就是要显示到的div) defaultSeriesType: 'line', //图表类型(line、spline、scatter、splinearea、bar、pie、area、column) marginRight: 50,转载 2013-03-06 12:31:10 · 2952 阅读 · 0 评论 -
highcharts点击事件获取点击点的值
还是直接来段代码吧。[javascript]chart = new Highcharts.Chart({ plotOptions: { series: { cursor: 'pointer', events: { click: function(e) {转载 2013-03-06 13:03:45 · 4033 阅读 · 0 评论 -
HighCharts 饼图背景色透明
默认的highcharts 背景都是白色,这次项目中需要在highcharts图的后面显示背景图片,所以必须让chart背景透明:function showPie(name){ var a = [ {name:'A',y:100,href:'http://www.baidu.com',color:'#D587CE'},原创 2013-02-05 13:03:26 · 13904 阅读 · 0 评论 -
jquery图表,范例及推荐 highchart+sparkline
HIGHCHARTS 官网:http://www.highcharts.com/code:具体操作网管API中都有。/** * 画一个柱状图 * @param valueList 图表的值 (数组) * @param dateList 日期值 (数组) * @param renderTo 要显示位置的id * @param controlValue 管控值原创 2012-10-22 10:05:30 · 7463 阅读 · 1 评论