flash网站规划品牌推广的具体方法
数据可视化图表库
在过去的文章中,我们探讨了数十个美学主题,但是设计工作并不总是纯粹的美学。 通常,真正“精心设计”的解决方案不仅在视觉上吸引人,而且灵活高效。 在某些情况下,在视觉外观上进行隧道视觉设计(而忽略项目的所有其他方面)会给您带来外观美观但无法使用的设计。
例如高跟鞋; 它可能看起来时尚并且吸引公众,但是对于必须佩戴它的女人来说,它的脚部疼痛,在柔软的地面上无用,并且无法跑步。 如果您对设计项目采用类似的方法,则最终可能会得到像高跟鞋一样的时尚,功能很少的设计。 为了确保您的下一个界面或登录页面设计不会遭受选择不佳鞋类的命运,您可能需要一种可视化数据的方法,以便在美观和实用性之间取得平衡。
设计师的第一个倾向可能是在Photoshop或Illustrator中制作出像素完美的图形或图表,但是该解决方案需要不断更新图表以获取最小的数据变化,这使得该方法远非易事和实用。 如果您的指标变化仅几个单位或百分点,您可能每次都必须打开可编辑文件,进行所需的更改,导出并上传静态图像。 进行如此微小的更改需要做很多工作。 更糟糕的是,如果您的数据是基于时间轴或其他不断变化的指标,那么图表实际上每天都会过时。 最后,静态图像最终不是交互式的,这会浪费您的编程知识和网站的交互式功能。
漂亮实用的图表
因此,与其牺牲每一盎司的实用性和交互性来获取完美的信息图表,不如使用动态图表库。 这些图表库可以显示出令人惊奇的清晰图形,同时仍然保持灵活性和易于更新,这使其成为设计师和普通查看者的绝佳解决方案。 其中一些库依赖于HTML5,旧版浏览器并未完全支持HTML5,但是随着每次新版浏览器更新,这些兼容性问题都会Swift消失。 动态图表也比大型图像文件小很多,而且更轻巧,这在站点速度方面具有额外的优势。 使用动态图表库的优势不断增长,而潜在问题却在减少。
有很多库可供选择,所有库都有其独特的优缺点。
高图
使用HighCharts查看水果消费数据的3种不同方式
HighCharts是基于JavaScript的图表库,具有时尚的图形,出色的支持和令人印象深刻的兼容性。 您可以依靠他们的图表在从可怕的Internet Explorer 6到iOS设备中最新版本的移动Safari的所有浏览器中运行。 他们的图表还具有微妙的动画效果-条形图的增长和趋势线的追踪-增添了视觉吸引力。 该库是开源的,因此可以根据任何项目的独特需求修改图表。 对于非商业用途,HighCharts是免费的,但是对于商业项目,HighCharts的成本很高。 对于单个网站,使用HighCharts只需花费80美元,但如果一个由10个开发人员组成的团队在多个项目中使用该库,价格将跃升至2,000美元。 如果您在应用程序中使用HighCharts,则必须与制造商联系,以就HighCharts的价格和使用达成协议。
绘图套件
用PlotKit渲染的三个图表
PlotKit的图表在视觉上可能没有HighChart的吸引力,但是PlotKit在所有情况下都是100%免费的。 它还具有有用的快速入门指南,可帮助您启动和运行图形。 PlotKit检测访问者的浏览器是否支持<canvas>,并在发现支持时使用该技术。 否则,它具有旧版浏览器的后备方法,可以达到相同的目的。 PlotKit不是独立的库。 它依赖MochiKit正常工作,与独立库相比,这可能会使安装和维护稍微困难一些。
d3.js
使用d3.js的“朝阳”图表
d3.js是一个基于JavaScript的图形库,它的文件大小具有鲜明的美感,并且其零美元的价格标签物有所值。 d3.js是可视化大量复杂数据的绝佳选择。 图表色彩鲜艳,干净,文档内容丰富且实用。 d3.js强调基于交互的,基于运动的过渡和转换,这可以为Web设计中的图表添加令人印象深刻的功能。 d3.js的开发者拥有入门入门的教程,以及针对退伍军人的丰富文档。
融合图
使用FusionCharts的九种不同图形
FusionCharts具有多种图表类型,所有图表类型均具有优美,专业的外观。 它们还具有数百种功能,并且为Powerpoint,Joomla,Dreamweaver和Flex等软件提供了扩展。 但是,所有这些工具都是有价的,FusionCharts的许可费可能高达10,000美元,这使得该选项仅适用于预算巨大且要显示大量数据的项目。
Google Chart工具
只是Google的多种图表工具
Google以Google Chart Tools的形式提供了自己的图表库。 就像您可能期望Google看到的那样,这些图表具有直观,熟悉的外观,并且易于设置和查看和分析。 Google图表工具充分利用了悬停效果; 将鼠标悬停在图表图例上的数据类型上通常会突出显示图表或图表的相应部分。 将必要的代码段添加到您的网站后,绘制(或更新)图表数据就像插入逗号分隔的文本值一样容易,就像在此代码示例中看到的那样,比萨饼的食用量由顶部开始:
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
虽然图表将依赖于外部文件,但是这些文件托管在可靠的Google服务器上,从而最大程度地减少了您对图表中断或其他技术问题的担忧。
绒毛
Flot的图表简单,干净,清晰
上面的图表库中的Flot是唯一的,因为它是为JQuery设计的,而不仅仅是JavaScript语言。 这可能使其成为想要在尽可能短的时间内起床并克服学习曲线的JQuery专家中的首选。 正如您可能会从JQuery产品中期望的那样,Flot在使图表具有交互性方面做得很好。 您可以使用跟随光标的“ X”和“ Y”轴形成十字准线,也可以使用简单的表单在图形或图表中打开和关闭数据。 为了获得更大的交互性,您可以将动态图形导出为静态PNG或JPEG图像文件。
结论
从以上的变化中,希望至少有一个图表库可以使您基于数据的设计既美观又实用。 它们的范围从简单免费到功能强大而昂贵。 从长远来看,适应动态制图工具可能会节省大量时间,否则将花费大量时间对静态图像进行微小而乏味的校正。

免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
您有任何图表库或绘图工具值得推荐吗? 或者,静态图像是否具有使图像编辑器成为可视化数据的最佳工具的优点?
翻译自: https://www.sitepoint.com/visualize-your-data-and-speed-up-your-site-with-dynamic-chart-libraries/
数据可视化图表库