深度解析JavaScript图表Highcharts 4

原创|对比评测|编辑:龚雪|2014-05-04 09:30:47.000|阅读 4297 次

概述:Highcharts 4和Highstock 2在四月份迎来更新,这次更新到底有哪些具体功能,我们如何使用这些功能,除了功能更新外,Highcharts还有哪些变化?慧都控件网为大家深入讲解Highcharts 4的变化。

Highcharts 4Highstock 2在四月份迎来更新。3D功能、全新DOWNLOAD BUILDER以及立体仪表、热力图等功能,都让用户为之兴奋。

这些功能到底怎样,我们如何使用这些功能,除了这些 功能,Highcharts还有哪些变化?今天,慧都控件网为大家深入讲解Highcharts 4的变化。

摘要:

Highcharts 4文件变化:

我们下载Highcharts 4会得到一个1mb左右的压缩包,小得不可思议(刚开始还以为下错了~~),解压后大约有3mb,在js文件夹中,我们找到了熟悉的文件:highcharts.js、、以及highcharts-all.js、highcharts-more.js等,老版本都有的。不过,让人眼前一亮的却是那个新面孔:highcharts-3d.js、highcharts-3d.src.js,这就是我们的3D模块文件,没有他,3D功能就真的成浮云了。

在modules文件夹中,也多出来了几个新面孔:heatmap.js,、heatmap.src.js、solid-gauge.js、solid-gauge.src.js,光看名字,我们也可以猜到这些文件所对应的个功能,他们分别是:热力图、立体仪表。文件直接地址: code.highcharts.com

Highcharts 4 Highcharts 3 Highcharts 3
Highcharts 4 Highcharts 3
Highcharts 4 Highcharts 3

比起Highcharts 3,Highcharts 4还添加了一些小功能,比如添加了两个主题颜色,不过鉴于这些功能相对比较简单,本文不做详细说明。如有需求,请参考: Highcharts 4更新说明

Highcharts 4 3D功能:

解读一:使用前提

使用Highcharts 3D功能,必须首先加载3D功能模块,即highcharts-3d.js。,将其放置在 highcharts.js 之后。

解读二:为图表设置3D选项

加载3D模块不会改变已经出现的图表,除非他们被专门设置过。这个功能很方便,可以让2D和3D 图表存在于同一页面,方便我们对比其他操作。

3D图表的设置操作在选项中  chart 上完成,一些特殊的图表设置可以在 plotOptions 中设置。

如果想偷点懒,将所有3D 选都设置了,可以使用下面的示例代码(需要修改相应值,相应参数可参考下文):

chart: {
    ....
    options3d: {
        enabled: ´boolean value´,
        alpha: ´numeric value´,
        beta: ´numeric value´,
        depth: ´numeric value´,
        viewDistance: ´numeric value´,
        frame: {
            bottom: {
                size: ´numeric value´,
                color: ´color value´
            },
            side: {
                size: ´numeric value´,
                color: ´color value´
            },
            back: {
                size: ´numeric value´,
                color: ´color value´
            }
       }
   },
   ...
}
...
plotOptions: {
    ...
    column: {
        ...
        depth: ´numeric value´,
        groupZPadding: ´numeric value´,
        ...
    },
    ...
    pie: {
        depth: ´numeric value´
    },
    ...
}

解读三:重要的3D选项(  chart.options3d 部分)

  • enabled :显示图表是否设置为3D, 我们将其设置为 true。
  • depth   : 图表的合计深度,默认为100
  • viewDistance  :定义图表的浏览长度.
  • alpha & beta  :  图表视图旋转角度

注意:viewDistance设置过小,可能使图表扭曲,这是因为观看点里图表太近。

在问答里面,我们有一个出现过的实例,大家可以来体验 一下,制作3D饼图:如何用highcharts制作3d图?

解读四: chart.options3d

hart.options3d 中可以在图表周围创建3个panes,我们把它称之为 frame,默认情况下,这些panes是不可见的,不过可以在 chart.options.3d.frame 中单独设置,我们举个例子:

bottom|side|back: {
    size:   The thickness of the pane (defaults to 0)
    color:  The color of the pane (default to transparent)
}

Highcharts 4 Download Builder:

需要定制Highcharts的时候,这个就比较方便了。我们可以下载文件体验一下.

编译代码:http://pan.baidu.com/s/1mgLUQP6

无编译代码:http://pan.baidu.com/s/1pJlWXn1

Highcharts 4功能表包括新功能以及之前版本中出现过的功能,Download Builder中的JS,也可以在下表工具中进行筛选,上面的js下载只提供了核心文件的下载(红色框内容)

分类 工具 说明 其他

ADAPTERS

选择自己的库运行Highcharts。如果想要带宽使用最小,在其他架构上建立APP或网站等,请使用 Highcharts standalone framework

Standalone framework 如果不想在页面加载 jQuery ,在jQurey上运行Higncharts  
jQuery adapter  

CORE

Highcharts核心文件

Core 不可缺少  

功能

增强图表功能

Html 使用HTML为提示工具内容着色,可以使用更高级的格式(如:图片、表格),需要rtl语言  
Plotlines or bands 在图表中绘制plotlines 或 bands  
Datetime axis 增强对基于时间单位的轴的支持  
Logarithmic axis 强化对数轴。  
Stacking 在每个数据顶部堆栈数据,防止重复  
Datalabels 数据标签为相应点显示数值或其他信息  
Polar 将图表转化为Polar charts  

RENDERERS

替代标准SVG渲染

VML renderer 不支持  SVG的老版本IE  
Canvg renderer Android 2.* 设备渲染图表用,图表在画布中渲染  

动态和交互

不使用让图表完全静态化

Tooltip 鼠标悬停显示  
Interaction 增强鼠标与图表的交互  
Touch (缩放等)触控操作  
MS Touch
优化微软触控设备支持
 
Dynamics 支持更多动态图表  

图表支持

Highcharts 支持所有图表

Line    
Area    
Spline
AreaSpline    
Column    
Bar    
Scatter    
Pie    
Arearange    
Areasplinerange    
Columnrange    
Gauge    
Boxplot    
Errorbar    
Waterfall 瀑布图显示收入、花费或其他相似数据累计结果,在Highcharts中的点可以是 positive 也可以是 negative, 中间值或总额。  
Bubble 气泡图可以在 设置了大小的X/Y图表中展现三维数据  
Funnel 漏斗图主要用于销售人员监控模拟销售周期中的数据  

STOCK

Highstock 用于创建金融图表或者时间线图表

Stock 绘制股票、时间图表  
OHLC 用于价格跟随时间变化而变化图表  
Candlestick 与OHLC相似,用柱图表示价格波动的范围  
Flags 标记事件、点等  

MODULES

Exporting 将图表保存为图片  
Data 缓解加载 CSV、 HTML 数据表以及  Google Spreadsheets 负担  
No data to display 无数据时,显示提示信息 <a target="_blank" "="" data-cke-saved-href="http://www.evget.com/article/2014/1/17/20427.html" href="http://www.evget.com/article/2014/1/17/20427.html">详情
Drilldown 钻取功能
Solid gauge 在立体仪表中显示数据  
Heatmap 为数据制作热力图  


标签:JavaScript HTML5图表

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highstock

纯JavaScript编写的开源股票图表控件

Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat