用highcharts展现你的数据
来源：互联网 发布：python try函数 编辑：程序博客网 时间：2024/06/07 16:01
摘要：
前面已经分享过图表插件，今天在来将下如何使用highcharts来绘制图表。highcharts支持在线定制，你可以选择你所需要的模块，然后点击build就会生成一个js文件链接，右键保存到本地酒可以在项目中使用了。highcharts支持多种图表，如折线、饼状、柱状等等，可以去官网查看(英文、中文)。并且你可以打印图表或者以PNG、JPEG、PDF、SVG格式下载，你可以从官网下载示例。
charts：
highcharts提供了很多功能，你可以在图上显示节点数据，或者当鼠标悬上时提示。支持多种形状的节点标签，异步加载数据。
View Code 
View Code
View Code
View Code
View Code
View Code
配置选项：
全局配置：
Highcharts.setOptions({ // 全局配置并不适合所有图表。 "global": { // VML所需要的图像路径正则，以便来绘制径向渐变 "VMLRadialGradientURL": "http://code.highcharts.com/{version}/gfx/vml-radial-gradient.png", // 附加文件的URL为Android 2设备延迟加载。这些设备不支持SVG,所以我们下载一个helper文件,其中包含canvg,依赖rbcolor,和canvg渲染器类。为了避免外连接我们的网站,您可以安装canvas-tools。js在您自己的服务器,并相应地改变这个选项。 "canvasToolsURL": "http://code.highcharts.com/{version}/modules/canvas-tools.js", // 分钟的时区偏移。Positive的值为西方的UTC，negative的值为东方的UTC，正如ECMAScript中的getTimezoneOffset方法。使用这个来显示基于UTC的数据在一个预定义的时区。 "timezoneOffset": 0, // 是否使用UTC时间轴缩放、tickmark Highcharts.dateFormat位置和时间显示。使用UTC的优点是,时间显示同样不管用户代理的时区设置。当地时间可以使用实时数据加载时或者当正确夏令时转换是必需的。 "useUTC": true }, // language "lang": { // 输出模块菜单。上下文菜单的工具提示标题打印和导出菜单项。 "contextButtonTitle": "Chart context menu", // Highcharts.numberFormat方法默认使用小数点，除非另有函数参数中指定的方法。 "decimalPoint": ".", // 导出模块。JPEG的文本下载菜单项。 "downloadJPEG": "Download JPEG image", // 导出模块。PDF的文本下载菜单项。 "downloadPDF": "Download PDF document", // 导出模块。PNG的文本下载菜单项。 "downloadPNG": "Download PNG image", // 导出模块。PDF的文本下载菜单项。 "downloadSVG": "Download SVG vector image", // 当按下按钮时显示的文本,链接回到父级。父级的名字是通过{ series.name }插入。 "drillUpText": "Back to {series.name}", // 当图表处在加载状态时，紧接着调用chart.showLoading方法，然后加载提示文本出现的内容。 "loading": "Loading...", // 一个数组,其中包含几个月的名字。对应于Highcharts.dateFormat方法的% B格式。 "months": [ "January" , "February" , "March" , "April" , "May" , "June" , "July" , "August" , "September" , "October" , "November" , "December"], // 当chart没有数据时显示的内容 "noData": "No data to display", // 公制前缀缩短大的数字用于轴标签。设置numericSymbols为null完全禁用缩短。 "numericSymbols": [ "k" , "M" , "G" , "T" , "P" , "E"], // 菜单项的文本打印图表 "printChart": "Print chart", // 放大图表是显示坐标文本 "resetZoom": "Reset zoom", // 放大图表时显示工具提示标题 "resetZoomTitle": "Reset zoom level 1:1", // months的简写 "shortMonths": [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"], // Highcharts.numberFormat方法中默认数字分隔符 "thousandsSep": ",", // 与months类似 "weekdays": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] }});
图表配置：
$('#container').highcharts({ // 图表的配置参数 chart: { // 当绘制多条轴线时，每条轴线上都会自动添加不同的 alignTicks: true, // 设置动画，当图表更新时 animation: true, // 背景色 backgroundColor: '#FFFFFF', // 边框颜色 borderColor: '#4572A7', // 边框圆角 borderRadius: 5, // 边框宽度 borderWidth: 0, // 给图表容器div添加class className: '', // 已废弃 defaultSeriesType: 'line', // 操作图表的一些事件 events: { // 当图表添加一条线时执行的事件 addSeries: function() {}, // 当点击图表时执行的事件 click: function() {}, // 当鼠标按下坐标轴标签时执行的事件 drilldown: function() {}, // 当鼠标抬起坐标轴标签时执行的事件 drillup: function() {}, // 当图表加载时执行的事件 load: function() {}, // 当图表重新绘制时执行的事件 redraw: function() {}, // 当选择图表时执行的事件 selection: function() {} }, // 图表高度 height: null, // 忽略隐藏的轴线 ignoreHiddenSeries: true, // x轴与y轴互换 inverted: false, // 图表边框与绘图区域的外边距 margin: [], // margin的下边距 marginBottom: null, marginLeft: null, marginRight: null, marginTop: null, // 三维绘制图表的一些参数 options3d: { // 透明度 alpha: 0, // 旋转角度 beta: 0, // 图像深度 depth: 100, // 是否使用三维绘图 enbaled: false, // 通过定义底部、前面、后面的面板来围绕图表绘制一个frame frame: { back: { color: 'transparent', size: 1 }, bottom: { color: 'transparent', size: 1 }, side: { color: 'transparent', size: 1 } }, viewDistance: 100 }, // panKey: '', panning: false, pinchType: null, plotBackgroundColor: '', plotBackgroundImage: '', plotBorderColor: '#C0C0C0', plotBorderWidth: 0, plotShadow: false, polar: false, reflow: true, renderTo: '', resetZoomButton: { position: {}, relativeTo: 'plot', theme: {} }, selectionMarkerFill: rgba(69,114,167,0.25), shadow: false, showAxes: false, spacing: [10, 10, 15, 10], spacingBottom: 15, spacingLeft: 10, spacingRight: 10, spacingTop: 10, style: {}, type: 'line', width: null, zoomType: '' }, colors: [{}], credits: { enabled: true, href: 'http://www.highcharts.com', position: { align: 'right', x: -10, verticalAlign: 'bottom', y: -5 }, style: { cursor: 'pointer', color: '#909090', fontSize: '10px' }, text: 'Highcharts.com' }, drilldown: { activeAxisLabelStyle: { cursor: 'pointer', color: '#0d233a', fontWeight: 'bold', textDecoration: 'underline' }, activeDataLabelStyle: { cursor: 'pointer', color: '#0d233a', fontWeight: 'bold', textDecoration: 'underline' }, animation: null, drillUpButton: { position: '', relativeTo: 'plotBox', theme: '' }, series: [], }, exporting: { buttons: { contextButton: { align : 'right', enabled: true, height: 20, menuItems: [], onclick: function() {}, symbol: 'menu', symbolFill: '#A8BF77', symbolSize: 14, symbolStroke: '#666', symbolStrokeWidth: 1, symbolX: 12.5, symbolY: 10.5, text: null, theme: null, verticalAlign: 'top', width: 24, x: -10, y: 0 } }, chartOptions: null, enabled: true, filename: 'chart', formAttributes: null, scale: 2, sourceHeight: null, sourceWidth: null, type: 'image/png', url: 'http://export.highcharts.com', width: null }, labels: { items: [{ html: null, style: null }], style: { color: '#3E576F' } }, legend: { align: 'center', backgroundColor: null, borderColor: '#909090', borderRadius: 0, borderWidth: 0, enabled: true, floating: false, itemDistance: 20, itemHiddenStyle: { color: '#CCC' }, itemHoverStyle: { color: '#000' }, itemMarginBottom: 0, itemMarginTop: 0, itemStyle: { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }, itemWidth: null, labelFormat: '{name}', labelFormatter: null, layout: 'horizontal', lineHeight: 16, margin: 15, maxHeight: null, padding: 8, reversed: false, rtl: false, shadow: false, // 已废弃 style: null, symbolHeight: 12, symbolPadding: 5, symbolRadius: 2, symbolWidth: 16, title: { style: { fontWeight: 'bold' }, text: null }, useHTML: false, verticalAlign: 'bottom', width: null, x: 0, y: 0 }, loading: { hideDuration: 100, labelStyle: { "fontWeight": "bold", "position": "relative", "top": "45%" }, showDuration: 100, style: { position: 'absolute', backgroundColor: 'white', opacity: 0.5, textAlign: 'center' } }, navigation: { buttonOptions: { align: 'right', enabled: true, height: 20, symbolFill: '#E0E0E0', symbolSize: 14, symbolStroke: '#666', symbolStrokeWidth: 1, symbolX: 12.5, symbolY: 10.5, text: null, theme: null, verticalAlign: 'top', width: 24, y: 0 }, menuItemHoverStyle: { background: '#4572A5', color: '#FFFFFF' }, menuItemStyle: { padding: '0 5px', background: 'NONE', color: '#303030' }, menuStyle: { border: '1px solid #A0A0A0', background: '#FFFFFF' } }, noData: { attr: null, position: { "x": 0, "y": 0, "align": "center", "verticalAlign": "middle" }, style: { "fontSize": "12px", "fontWeight": "bold", "color": "#60606a" } }, pane: { background: null, center: ["50%", "50%"], endAngle: null, startAngle: null }, // 绘制图表参数，比如：柱状图，饼状图等 plotOptions: { }}); 0 0
- 用highcharts展现你的数据
- Highcharts将数据以图表的形式展现
- 数据挖掘 用可视化效果展现你的数据
- Json字符串和highcharts数据图表展现
- highcharts 图表插件与Struts2结合应用，用图表直观展现后台数据分析结果
- highcharts的数据赋值
- ajax请求返回Json字符串运用highcharts数据图表展现数据
- 用户最关注的多种数据用什么方法展现
- 用Cognos Maps展现和地域相关的数据
- 好用的数据highcharts中异步加载数据
- 数据展现
- 请展现你的代码之美
- 女人展现出你美丽的一面
- Highcharts中数据的作用
- Highcharts的数据表示(1)
- DataMiningHtmlViewers对数据挖掘的展现
- Crystal Xcelsius 数据展现的魅力
- 利用sharepoint中的的SPgridview展现数据
- Android ViewTreeObserver简介
- c#解析XML文件来获得pascal_voc特定目标负样本
- IOS--CALayer实现，界限、透明度、位置、旋转、缩放组合动画（转）
- UIButton 的图片自动拉伸
- MySQL常用语句
- 用highcharts展现你的数据
- 写MySQL存储过程实现动态执行SQL (转)
- js计算时间加减及有关时间大小的比较
- delegate & AsynInvoke
- Android Zxing框架扫描解决扫描框大小，图片压缩问题
- PHP_PHP操作Powerpoint-PHPPowerPoint
- 如何替换Windows的Shell（即explorer.exe）
- UVA112 Tree Summing
- 使用ThinkPHP框架快速搭建网站
