javascript分布图,分布类图表

各种图表的适用场景

柱形图使用垂直的柱子显示类别之间的数值比较，其柱子条数不宜过多（柱子过多坐标轴标签可能会显示不全）。

条形图和柱形图类似，但柱子条数可相对多一些。

柱形图和条形图适用于比较对比类需求：

适用场景：数据量对比

其中堆积柱形图条形图还可用于占比类的需求：

适用场景：系列对比

[](javascript:)

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

需要注意的是折线图的数据记录数要大于2，可用于大数据量的趋势比较，但是同一个图上最好不要超过5条折线

面积图是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色填充，颜色的填充可以更好的突出趋势信息。

面积图的填充色要带有一定的透明度，透明度可以很好的帮助使用者观察不同系列之间的重叠关系，没有透明度的面积会导致不同系列之间相互遮盖。

折线图比较适用于趋势类的需求：

适用场景：数据量随时间的变化趋势，系列趋势对比

面积图还可制作成堆积面积图，除了趋势类的需求还适用于比较和占比类的需求：

适用场景：系列占比，时间趋势占比

[](javascript:)

饼图广泛得应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类

饼图不适用于多系列的数据，因为随着系列的增多，每个切片就会变小，最后导致大小区分不明显，同时多个饼图之间的数值也不好进行比较。

饼图适用于比较一个数据分类上各个模块的大小占比的需求：

注：饼图可通过设置其内径大小转变为圆环图

饼图还可制作成多层饼图的样式，展现不同分类数据占比，同时还能体现层级关系：

适用场景：系列占比、系列大小对比（玫瑰图）

[](javascript:)

散点图将两个变量以点的形式展现在直角坐标系上，点的位置由变量的数值决定，通过观察数据点的分布情况，可以推断出变量间的相关性

制作散点图所需数据最好多一些，否则相关性不明显

散点图适用于分布和关联类的需求：

适用场景：相关性分析、 数据分布情况

气泡图是一种多变量图表，是散点图的变体，除X、Y轴所代表的的变量值，每一个气泡的面积代表第三个数值数据

需要注意的是，气泡图的数据大小容量有限，气泡太多会使图表难以阅读。

气泡图适用于比较和分布类的需求：

适用场景：分类数据对比，相关性分析

[](javascript:)

仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值，可直观的表现出某个指标的进度或实际情况

需要注意的是为了视觉上的不拥挤，指针的数量不宜过多。

仪表盘还可制作成环形和试管型，表现占比情况：

适用场景：时钟，比率展现

[](javascript:)

雷达图用于比较多个量化变量，比如看看哪些变量具有相似的值，或者是否存在极端值。雷达图也有助于观察数据集内哪些变量的值比较高或者低，因而适用于展示工作表现。

需要注意的是雷达图上多边形过多会使可读性下降，使整体图形过于混乱；变量过多，也会造成可读性下降，因为一个变量对应一个坐标轴，这样会使坐标轴过于密集。

雷达图适用于比较类的需求：

雷达图还有一种堆积柱形的样式，可用于分类和系列间的双向比较，同时还能体现占比情况：

适用场景：维度分析、系列对比，系列权重分析

[](javascript:)

框架图是将等级以树形结构的形式展现的一种可视化手段，可以将层次关系清晰地展示出来。

框架图适用于层级关联类的需求：

适用场景：层级展示，流程展示

[](javascript:)

矩形树图适合展现具有层级关系的数据，能够直观体现同级之间的比较。相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展现占比的功能。

需要注意的是矩形树图适合有权重关系的层级表现，若不需要体现占比，框架图可能更清晰明了。

矩形树图比较适用于占比和关联类的需求：

适用场景：带权的树形数据、树形数据占比情况

[](javascript:)

漏斗图可以展示每一阶段的占比情况，直观体现各模块的大小。

需要注意的是系列不宜过多，否则容易显得拥挤，效果不佳。

漏斗图适用于比较排名类的需求：

同时，对比类的需求漏斗图也同样可以满足，多个漏斗图横向排列，数据对比度也十分清晰：

适用场景：数据排名，占比情况，标准值对比

[](javascript:)

词云，是文本数据的视觉表示，由词汇组成类似云的彩色图形，用于展示大量文本数据，能快速感知最突出的文字。

词云所需数据量需要稍大些，数据的区分度也需要比较大，否则效果不明显，并且不适合要求准确的分析。

词云适用于突出比较类的需求：

适用场景：关键词搜索

[](javascript:)

甘特图直观地表明任务计划是在何时进行及实际进展与计划要求的对比。管理者由此很方便的了解到一项任务(项目)的进展。

甘特图适用于流程进度类与时间相关的需求：

同时流程的关联性的需求也可实现：

适用场景：项目进度，事物随时间推移的状态变化，项目流程

[](javascript:)

地图分为区域地图、点地图和流向地图。

（1）区域地图是一种在地图分区上使用是颜色来表示一个范围值的分布情况的地图。

适用于对比突出和分布类的需求：

（2）点地图是一种通过在地理背景上绘制相同大小的点来表示数据在地理空间上分布的方法

通过点的分布可以很方便得掌握数据的总体分布情况，但是当需要观察单个具体的数据的时候，它是不太适合的。

点地图适用于分布类的需求：

将点替换为气泡，不仅能显示分布情况还能粗略比较各地区数据的大小：

（3）流向地图体现了源地和汇地之间的互动数据，常用连接空间单元几何重心之间的线段来表达，线的宽度或颜色来表示源地和汇地之间的流向数值。

有助于说明地理迁移的分布，动态流向线的使用还减少视觉上的混乱。

流向地图适用于分布、比较和流向类的需求：

[](javascript:)

热力地图用来表示地理范围内各个点的权重情况，除了以地图为背景图层，还可以使用其他图片

热力图适用于分布和突出类的需求（常用彩虹色系）：

相关问答

Q1: js里面如何绘制正态分布函数图像

matlab中的常用概率分布函数。

引用他人的整理成果，总结的很好。

用matlab画正态分布图的代码：

clear all；

x=-4:0.1:4;

y=normpdf(x,0,1);

figure;

plot(x,y);grid;

legend('标准正态分布');

结果如下

算出正态分布的alpha分位点。

用~inv函数来实现：

clc;

clear all;

x =-4:0.1:4 ;

y1 = normpdf(x,0,1);

n=norminv(1-0.01,0,1);

x2 = n:0.1:4;

y2 = normpdf(x2，0，1);

plot(x,y1);

hold on;

area(x2,y2);

Q2: 我们每天关注的疫情分布图是怎么做出来的？

这段时间以来，每天早上起床的第一件事就是打开手机看看当前疫情的状况。

作为一名程序员，看这个图的时候，我猜测这个图应该是用百度的echarts画的，然后脑子里过了一下echarts的使用。不过试试证明，我还是太年轻，没有产品意识。

百度的echarts团队其实早就将echarts的能力包装成一个完整易用的工具开放出来。不需要懂一行代码，谁都可以快速开发出来一个像疫情图这样高级的图标。

话不多说，这个工具就是百度图说，网址是

看右下角，果然没错，echarts出品。

下面开始我的表演：

随便找个网站，拔下来一份最新的疫情数据

点击开始制作图表--- 创建图表 --- 选择地图---标准中国地图

数据编辑--- 导入excel。即可将我们准备的疫情数据导入

4，调整颜色

通过参数调整。在值域中通过修改值域范围和控制器颜色。可以简单的做出一个还不错的图表。

另外，图说里面还有其他很多常用的图例。都是我们用echarts经常来做的。

这个工具挺好，虽说我们程序员都可以用代码写出来，这样也可以省不少事。并且这个工具可以查看源代码，又没实现的功能，咱们也可以拿来改改。

对于不懂代码的人来说，直接拿来用就行，一行代码你也不需要懂。

另外其他的一些开源图表推荐

D3.js是一个开源的JavaScript库，用于根据用户数据处理文档。这是一个强大的工具，通过HTML，SVG和CSS的帮助，赋予数据生命。 D3允许开发人员将任意数据绑定到DOM，然后将数据驱动的转换应用到DOM。例如：考虑一个数组数组，您可以使用它来生成一个HTML表，或者您可以使用相同的数据生成交互式条形图或饼图。

官方网站：https：//d3js.org/

Chart.js是一个由社区维护图表库，通过使用它，我们可以为您的网站创建响应式图表。通过使用它，我们可以生成混合图表，并且在现代浏览器中具有很好的渲染能力。Angular Chart建立在Chart.js库之上，对于Angular项目来说，实现Angular图表将非常容易。

官方网站：http：//

n3-charts也是一个开源的JavaScript图表库，它使得Angular开发者的生活变得简单。 n3-chart是建立在D3.js和AngularJS之上的，因此它具有更强大的图表，并且易于实现。

官方网站：http：//n3-charts.github.io/line-chart/#/home

Q3: 要生成像 iOS 8 Health 应用那样的图表，有哪些比较好用的库

JS图形、图标库推荐：

1. JS Charts

JS Charts 是个基于JavaScript的图表生成器，不需要任何编码。JS Charts 非常容易使用，只要用户使用客户端脚本（比如，在 web 浏览器中执行）。它不需要多余的插件和服务器模块，只需要下载 JS Charts 的脚本，准备好 XML，JSON 或者 JavaScript 数组数据。

2. Canvasjs

CanvasJS 是个易用的 HTML5 JavaScript 图表库，基于 Canvas 元素。Graphs 可以通过设备渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允许用户创建适用于所有设备，不影响 web 应用程序的功能和可维护性的富仪表盘。CanvcasJS 有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级，漂亮和响应式的仪表图。

3. Chart.js

Chart.js 是个简单的，面向对象的客户端图形库，用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的，完全自定义，而且看起来非常好看，即使在 retina 显示。它使用 HTML5 canvas 元素，支持所有现代浏览器，并且支持 IE7/8。

4. Aristochart

Aristochart 是个高度自定义，灵活的折线 Canvas 图表库，允许用户集中精力在图表的审美方面，后台工作做得非常好。Aristochart 有个持续进步的社区，提供许多不断增长的主题给用户选择。

5. xCharts

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript图表库，他使用HTML，CSS，SVG实现图表，xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。

6. BonsaiJS

BonsaiJS 是个轻量级的 JavaScript图形库，提供直观的图形 API 和 SVG 渲染器。主要特性包括：架构分离的运行器和渲染器；iFrame，Worker 和 Node 运行上下文；形状，路径，Assets（音频，图像，字体，subMovies），Keyframe 和常规动画，等等。支持现代化浏览器： Safari, Chrome 和 Firefox。

7. Sigma.js

Sigma.js 是个免费开源的 JavaScript图形库，使用 HTML5 canvas 元素。它的设计是特别为了在 web 界面分享交互式网络 Map 和动态展示网络数据库。

8. Morris.js

Morris.js 是个轻量级的 JavaScript库，使用 jQuery 和 Raphaenuml 来绘制时序图。 Morris.js 生命周期是从代码驱动 howmanyleft.co.uk 图表开始的。它支持的浏览器有： IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小，只有一个函数： Morris.Line(选项)，包括了许多配置选项。

9. Paper.js

Paper.js 是一个开源的向量图形脚本框架，基于 HTML5Canvas 开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。

10. AmCharts

AmCharts 是个高级图表库，适用于所有数据的可视化。AmCharts 包括： Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。

11. Smoothie Charts

Smoothie Charts是个极小的图表库，专为实时流媒体数据设计的。Joe Walnes 想展示 WebSocket推动的实时的流数据。虽然很多图表库允许用户动态更新数据，但是没有一个是可以优化源源不断的流数据。

12. Dygraphs

Dygraphs 是个快速，灵活，开源的 JavaScript 图表库。它允许用户展示和解析密集的数据集。可以高亮需要强调的数据集。可以使用鼠标点击或者用鼠标拖动来缩放图表；可以修改数值或者点击条目来调整平均周期。

13. Grafico

Grafico 是 Grafico 是一个基于 Raphaël 和 Prototype.js 构建的 JavaScript 图表库，提供了各种图表类型。这些漂亮的图表，有利于传递他们的信息。

14. Highchart JS

Highcharts JS 是一个制作图表的纯 Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE 和火狐等等；对个人用户完全免 费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是 PHP、Asp.net 还是 Java 都可以使用。

15. Flotr

Flotr 是一个基于 Prototype 开发的 JavaScript绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。

16. Flot

Flot 是受 Plotr 和 PlotKit 的 启发，Ole Laursen 基于 jquery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

17. jFreeChart

JFreeChart 主要用来各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。JFreeChart 项目历史悠久，而且有大量的开发者在维护。

18. Plotkit

PlotKit 是一个纯 JavaScript 绘图工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文档，方便用户使用。

19. Planetary.js

Planetary.js 是个令人称奇的创建交互式 web 地球仪的 JavaScript库。它使用 D3 和 TopoJSON 来解析和渲染地理信息。Planetary.js 使用基于插件的架构，甚至默认自身就是个插件！这使得 Planetary.js 非常灵活，而且它是允许用户完全自定义，包括颜色，大小，rotation 等等。更重要的是，用户可以在任意位置使用自定义的颜色和大小来显示动画“pings”；它还支持鼠标拖动和缩放，100% 免费和开源。

20. Ember Charts

Ember Charts 是个图表库，使用 Ember.js 和 d3.js 框架构建的。它包括时间线，条形图，饼图和散点图，非常容易扩展和修改。这些图表组件都是开箱即用的，在图表交互和演示方面应用的很好。

21. Sparky

Sparky 是个免费的 JavaScript 波形图库，依赖于 Raphaël ，非常容易使用。支持多个图表类型（折线，条形，area），折线和区域图可以有多个颜色选择。

22. Envision.js

Envision.js 是个 JavaScript 库，用来简化，快速创建交互式的 HTML5 可视化图表。它包括两个图表类型：时序图和 Finance ，提供 API 给开发者，用户可以直接自定义创建图表。这个库氏基于 Flotr2 和 HTML5 Canvas 的。它与框架无关，依赖于几个小的 JavaScript 库。

23. Dc.js

dc.js 是个 JavaScript 图表库，有着原生的 crossfilter， 支持和允许高效展示大型多维数据集（基于 crossfilter 的示例）；图表使用 dc.js 渲染，是使用原生数据驱动，所以能得到用户的实时反馈；dc.js 最大的亮点在于能提供一个简单而强大的 JavaScript 库，能进行数据可视化和分析；不仅支持桌面浏览器还支持移动端。

24. ElyCharts

Elycharts 是一个易于使用的，可定制的 JavaScript图表绘制组件。这个组件可用于绘制大部分常用的图表类型包括：line, column, are, bar, pie, sparklines and combinations。它支持多种交互式功能包括：鼠标跟踪、事件处理、利用各种动画高亮显示选择中的区域，Tooltip，HTML锚点等。可以动 态修改数据，并以漂亮的动画效果展示图表中的变化。图表利用SVG/VML技术生成，基于jQuery + Raphaël开发。

25. AwesomeChartJS

AwesomeChartJS Awesome Chart JS 是一个 JavaScript生成图表的类库，它利用了 HTML5 的 canvas 标签来创建统计图表。此类库就是为了减轻开发者的工作量，使用它只需书写几行代码便能生成漂亮的图表。

26. Arbor.js

Arbor.js 是一个利用 Web Works 和 jQuery创建的可视化图形库，它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。

27. CanvasXpress

canvasXpress 是一个基于HTML5 canvas标签实现的 JavaScript图表类库，它能够支持线性图、柱形图、饼图和热点图等多种常见的图表类型。它所生成的图表交互性很强，鼠标放 上去时会动态显示值。除此之外，它也具有相当高的可定制性，可设置图表的文字、颜色和要显示/隐藏的元素等。当然更重要的一点是，虽然它使用了 HTML5，但是依然支持IE6浏览器。

28. JSXGraph

JSXGraph 是一个支持各种浏览器的交互式几何图库绘制。JSXGraph 使用 SVG 和 VML。

29. Rickshaw

Rickshaw 是一个用于绘制时序图的简单 jS 库，基于 Mike Bostock’s delightful D3 库构建。

30. rGraph

RGraph 是基于HTML5 canvas标签的HTML5 canvas图形库，支持 20 种不同的可视化类型。使用 canvas 标签，RGraph 创建“HTML5 图表”，意味着更快的 web 页面加载和更少的 web 服务器加载。这能帮助减小 web 页面的大小，低能耗和更快的浏览速度。

31. Fusion Chart

FusionCharts Suite XT 是个专业的 JavaScript图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可 点击的 legend 关键字，还有 dril-down，缩放/滚动 和单击打印图表功能。

32. Graph Dracula

Dracula 是用一系列的工具来显示和布局互动图表，包括各种相关的算法。它只是纯 JavaScript 和 SVG ，并无 Flash，Java，其他插件。它非常容易使用，用户可以很简单的自定义任意的元素。

33. Bluff

Bluff 是个 JavaScript 的 Ruby 的 Gruff graphing library端口。它支持所有 Gruff 的特性，但是有着最小的依赖。用户只需要运行一个第三方脚本： JS.Class 副本(压缩后只有 2.6kB ) 和 Google 的 ExCanvas 副本，用来支持 IE 中的 canvas。这两个脚本在 Bluff 中都有下载。Bluff 自身压缩后大小大概有 11KB 。

34. Pizza Pie Chart

Pizza Pie Charts 是个响应式饼图图表，基于 Adobe Snap SVG 框架，通过 HTML 标记和 CSS 来替代 JavaScript 对象，更容易集成各种先进的技术。

35. jGraph

HTML5 图表组件，完全支持l IE 6-8 和触屏设备。 JGraph 自2001年来就一直提供最先进的图表软件组件，是第一个流行的 JGraph Swing 库。然后在 2005 年走在时代的前沿开发 mxGraph。