21个实用的Javascript数据图表插件 | 设计达人
爱设计，爱分享。
21个实用的Javascript数据图表插件
赞助商链接
今天主要和大家分享一些统计图表相关的JS插件，图表通常用在网站后台界面，作为一种可视化数据形式展示，能让用户直观的查看统计信息，然而图表在WEB上实现是比较复杂的，特别有些要实现移动端显示，这样的前端代码编写难度较高，所以如果能使用一些图表库就方便多了。
在本文我们精选了21个优秀的Javascript数据图表插件，支持很多不同类型的图表库，而且多数是开源代码，可以免费使用，值得前端人员收藏。
Chartist.js
Chartist 是一个响应式图表库，支持桌面和移动平台使用，支持CSS动画，但兼容性需要在IE9以上，其它流行的浏览器一般都兼容了。 版权: 免费使用
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
FusionCharts
版权: 免费个人使用，商业用途需付费
要在IE8以上才能正常浏览 版权:免费使用
Chart.js 是一个轻量的图表库，大小只有11KB，图表设计简约，速度快，如果用于一些小型数据展示，我想这个很适合。 版权: 免费使用
Google Charts
Highcharts
版本：个人免费使用，商业用途需付费
版权：免费使用
版权：免费使用
版权：免费使用
版权：免费使用
Ember Charts
版权：免费使用
jQuery Sparklines
版权：免费使用
版权：免费使用
版权：免费使用
Cytoscape.js
版权：免费使用
版权：免费使用
版权：免费使用
版权：免费使用
Plottable.js
版权：免费使用
版权：免费个人使用，商业需付费
如果有更好的Javascript图表插件，欢迎在下方留言处分享给大家：）
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，欢迎转载。
印刷工艺必备神技
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群热点及自动漫游生成插件 - krpano教程
Sorry, you have Javascript Disabled! To see this page as it is meant to appear, please enable your Javascript! See instructions
Hotspots & Autotour Creator Plugin droplets based plugin整合了插件的批处理 漫游可运行于 Flash 以及 HTML5
本插件让你无需编写代码，仅仅需要点击鼠标就可以生成热点或一个自动漫游。你可以在不使用代码的情况下，生成任意的热点，或者创造一个让人赞叹不已的自动漫游，然后保存漫游。你也可以修改xml来自定义插件。
热点 – 插件的第一部分是针对热点，支持下述类型热点：– 图像热点（点击时图像显示在屏幕中央）– 链接到场景的热点（点击时载入所链接的场景）– 视频热点（点击时视频显示在屏幕中央）– 移动热点（使用鼠标拖拽热点到你所希望的位置）– 删除热点（删除错误的热点）热点所应用的样式是可自定义的，如果你有其它喜欢的样式你可以进行更改。要更改图标，可以重置样式定义，或者简单的替换图像热点、视频热点和链接到场景的热点的默认图像。注意:– 要在当前的场景保存热点。当你完成一个场景后，保存热点然后前往下一个场景。自动漫游– 插件的第二部分让你能够无需代码仅仅使用鼠标创造一个让人惊叹的自动漫游。定义完成后，只需要保存autotour_definitions.xml文件。在创建自动漫游时，你可以聚焦在场景中任意位置，可以放大或者缩小，可以显示一张图片，最重要的是，你可以一次性创建完整的一套自动漫游。自动漫游的速度和漫游区间之间停顿的长度可在设置中设定。你最终的自动漫游可由一个播放按钮或预定义的空闲时间计时器触发。当结束时，自动漫游可设置为循环。当有用户交互时自动漫游会自动停止。
使用批处理工具：
创建热点：
创建自动漫游：
链接： 密码：xfpt
插件的发布是以droplets批处理的形式发布的。这就是说你只需要将文件解压到你的krpano下载包文件夹中。然后你按照普通的方法拖拽全景图到droplet中，然后就可以生成具有插件的完整的代码，并且含有视频和图像的例子。编辑器只能工作在Chrome和Firefox的桌面版浏览器中，必须在krpano本地服务器中启动。你可以使用tour.html测试效果
当你点击保存热点或自动漫游时，插件会生成一个新的xml文件，你需要保存到你的项目文件夹，覆盖原文件。
插件包含以下droplet:-MAKE HOTSPOTS AUTOTOUR CREATOR (VTOUR MULTIRES) droplet-MAKE HOTSPOTS AUTOTOUR CREATOR (NORMAL) droplet
&hotspots_settings
hotspots_tooltip_enabled =”true” -& 图像/视频是否显示工具提示
use_mp4_video_format_only =”false” -& 是否只允许使用mp4格式，默认为false，可使用两种格式命名为 name.mp4|name.webm (krpano默认)
/&&autotour_settings
autotour_enabled =”false” -& 是否在onidle满足时自动开始自动漫游
loop_at_end =”false” -& 是否在结束时循环播放
start_autotour_button =”true” -& 是否显示播放按钮。点击按钮时开始自动漫游.
idle_time =+ -& 当自动漫游可用时，当没有用户交互多少秒后启动
acceleration =+ -& 自动漫游的加速度
breakspeed =+ -& 自动漫游的停止速度
maxspeed =+ -& 自动漫游的最大速度
pause_on_point_view =&#″ -& 当视野停留在特定的浏览点时停留的时间，以毫秒计算
pause_on_load_scene =&#″ -& 当新场景载入时停留的时间
pause_on_open_image =&#″ -& 图像显示的时间
pause_on_close_image =&#″ -& 图像关闭后停留的时间
display_autotour_msg =”true” -& 当自动漫游开始时是否开始信息
autotour_started_text =”Autotour started” -& 需要显示的自动漫游信息
autotour_preview_text =”Autotour preview started” -& 显示的自动漫游信息 (预览模式)
allscene_fov =+ -& 自动漫游将拉大到多大的视角 (可被场景的fovmax所限制)
allscene_fovmin =+ -& 自动漫游将缩小到多小的视角 (可被场景的fovmin和maxpixel所限制)
show_image_action =”magflyouts_image_show” -& 默认执行显示图像的动作
hide_image_action =”magflyouts_image_hide” -& 默认执行关闭图像的动作
hotspots_hiden_on_autotour =”true” -& 场景热点在自动漫游时是否显示
/&&robertitor_settings
image_hotspot_style =”pichotspot” -& 显示图像热点的样式的名字
scene_hotspot_style =”skin_hotspotstyle” -& 链接场景的热点的样式的名字
video_hotspot_style =”videohotspot” -& 显示视频的热点样式的名字
微信扫一扫关注krpano中文网公众号&&为你 webpack 插件提供选择
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2017 |
作者 红领巾 ]
plugins for webpack: /ChenYangShao/plugins
CoderArrow
* 希望对你有帮助, 欢迎指正,
*曾想着hexo等工具,后来考虑了一些其他功能 还是自己搭个吧,
* 自己搭的架子webpack2跑起来了,
* 对我来讲 现阶段, webpack知道怎么配就行了, 工作重点不应该放在这里
* 决定使用大神的模板,
* 节省时间, 提升效率, 学习配置/思想
* 另外, 使用到的资源链接, 非商业用途, 请前辈海涵
* 使用的是思维导图:mindnode, 真心推荐
推荐: react-boilerplate
Dependencies
cheerio: 核心JQ
友人提示: Node, 直接拿HTML处理有时候会出现取出的文字被反转,检测不到元素,文字丢一半的问题
Circular Dependency Plugin: 帮助查错
暂时没搞明白
css-loader
不要问我为什么, 阮一峰老师:
它对 CSS Modules 的支持最好，而且很容易使用
测试用: 方便调试
方便断言,操作和遍历react输出
API直观灵活
模仿JQ的操作好遍历DOM
主流代码校验插件
eventsource-polyfill
provide EventSource polyfill
Snapshot Testing
http://facebook.github.io/jest/
零配置测试平台
lint-staged
提交仓库前, 校验错误, 控制代码风格
A `rm -rf` util for nodejs
Util 是utility缩写 正如其义, 有用的东西
HtmlWebpackPlugin (/ampedandwired/html-webpack-plugin)
创建 Html 文件 服务于webpack打包
‘I want to expose a local server behind a NAT or firewall to the internet’
帮助开发者, 创建文件这块节省时间
/package/plop
null-loader
一个返回空模块的 loader。
offline-plugin
提供离线缓存
PWA: https://offline-plugin.now.sh/
/NekR/offline-plugin
ShellJS is a portable (//OS X) implementation of Unix shell commands on top of the Node.js API.
/shelljs/shelljs
/sinonjs/sinon
style-loader
加载 CSS 需要 css-loader 和 style-loader，他们做两件不同的事情，css-loader会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader会把原来的 CSS 代码插入页面中的一个 style 标签中
https://fakefish.github.io/react-webpack-cookbook/Loading-CSS.html
url-loader
/webpack-contrib/url-loader
fontfaceobserver
Web font loading. Simple, small and efficient
https://facebook.github.io/immutable-js/
有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的，下面我们来一探究竟。
JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。如 foo={a: 1}; bar= bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，Mutable 带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用 shallowCopy（浅拷贝）或 deepCopy（深拷贝）来避免被修改，但这样做造成了 CPU 和内存的浪费。
/camsong/blog/issues/3
Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点
/package/intl
facebook报错插件
开发环境报描述性错误,生产环境通用性错误
/package/invariant
轻量级NodeJS命令行参数解析引擎
https://jarvys.github.io//minimist-js/
服务于Redux
计算 dispatch数据, 存储最小可能的state
除非有且最少有一个参数变化才会重新计算
/reactjs/reselect
是组合的, 可以作为其他选择器的输入
You are Awesome.
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
一艺之成，当尽毕生之力！
手机客户端