tech - 用Javascript制作你的第1个图表
数据在我们周围皆是，并且它们的视觉化方案已成为我们生活的1部份。图标，信息图，地图和仪表盘由于它们以1个能比较容易转换的方式展现信息，在今天有大量的需求。
好事是做图表不需要从开发者，设计者或任何其他人那获得大量的技能或特殊的知识。在这篇文章中，我们会展现1些最基本的并解释如何用javascript和html5轻松地处理交互数据视觉化。
我们将会以1个单项目条形图表开始所以你可以快速制作多项目和堆叠条形图表的方法。条形图表是1个现在展现数据的流行方法，并且所用到的开发逻辑可以轻松地转换成其他图表类型。
终究的图表会是1个百分比堆叠的图形图表：
当今有很多javascript的图表库；有1些是完全免费的，比如D3和Google图表，但是其他的1些需要针对商业用处收费。我认为，它们中最综合，强悍的是amCharts,AnyChart,Highcharts。
我们这次的教程中，我已决定用AnyChart。但是，流程对每一个库来讲都是10分类似的，特别是如果你正在做1些简单的东西。AnyChart有大量的文档和API指引并且支持非常多种类的图表类型并且有大量的可以马上使用的demo，所以这对初学者来讲是1个很好的选择。
为了方便起见，这个教程里的所有例子在这个CodePen的集合中可以取得，并且可以在这马上用或将CSS/HTML/JavaScript的demo文件输出成紧缩文件。
JS图表制作的3个简单步骤
为你的网站或app制作1个基本JavaScript的图表的步骤包括以下3步：
准备你的数据；
连接库；
写1些简单的代码。
1.准备数据
就像1个大船需要深水每个简单的图表需要简单的数据。固然，如果你有大量的数据或它的结构不是很明显，你需要先准备1下。
当我们制作大部份的图表类型时，我们只需要X和Y变量。但是，条形图表它常常只需要用到Y变量，和1个索引或1个被用作X项目数字。以下是1个当我们用到JavaScript数据矩阵的例子：
如果你用JSON/XML来转化数据，然后你的数据可以像下面那样。
大致上来讲，有许多处理软件开发者在所有或大部份文档中描写的数据和视觉化的的方法。记住，我推荐检查1些你的图表库文档的相干章节。
2.获得1个图表库
你所使用的库很明显是1个关键元素。如果你将在本地使用图表，去下载1个2进制的包并使它们就在手边。
但是，如果你需要为1个网页app或1个网站的页面制作图表，CDN应当会是1个更好的选择。它会从最近的服务器上为你的客户端加载文件，给予你1个更快的页面加载速度和更好的表现。
3.编写简单的HTML/JAVASCRIPT代码
当我们的数据和库都准备好了，我们可以开始编写终究可以画出图表的代码了。
a）首先，我们需要1个页面的容器。最好的方法是用<div>元素并设置他的ID：
b）然后，让我们加入数据：
c）再者，我们声明我们想要的图表类型，通过调用相干构造函数：
d）为了使它们对读者更加清楚，我想给图表1个标题：
e）现在，让我们开始加上1个项目：
f）我们的图表必须放在1个容器里面，所以我们声明1下我们刚刚编写的容器：
g）所有进展顺利，所以我们可以画出我们的图表了
这是我们的结果：
方便起见，下面是你的所有代码：
看上去非常直白，不是吗？现在我们可以方便地比较各个种别的总销售额。
制作多项目可堆叠的条形图标
既然我们已学到了用JavaScript制作图表基本的方法，我们可以进1步构建1个略微复杂1点的可以展现更多信息的图表。如我之前所说，我会展现给你们看1个快速简单的制作多项目条形图标，并有堆叠效果的方法。
基本上来讲，流程是非常类似的。1如平常，以数据开始。
1个表格的数据
在上面的条形图标中，我们有1个变量（产品销数额数据项）并且有1些分类（产品的种类）。为了额外地展现每一个数值的组成，这是可堆叠条形图标的基本，我们需要更多具体的数据。
在这，我们可以用到已展现在页面上的数据。比如，如果你已有1个HTML表格，你可以轻松地在它的基础上构建。如果你使用AnyChart的数据转换模型，你所需要的就是声明那个表格就是数据源。
1）获得数据转换器：
2）为表格准备好数据
3）制作1个图表并声明数据源：
马上就会看到1个多项目的条形图标，可使我们快速地在每一个独立的种别里比较每一个产品的表现。
改变项目的种别
所有必须的细节，包括数据，都已声明了。现在我们可以改变项目的种别并且得到1个堆叠的条形图标，在之前那个传统的多项目表格的基础上。这其实不难，由于你只需要加上1行代码：
我们刚刚1下子制作好了1个堆叠的条形图表，并没有改变多项目图表的构造。作为结果，我们不单单可以马上比较各种别的总销售额，我们还可以辨别那个产品是1个种别整体比其他种别更多或更少。
由于我们在1开始就设定我们的终究目标是1个百分比堆叠的条形项目，让我们改变模型来到达目的：
现在他是1个百分比堆叠的条形图标，它使你可以突出部份整体的关系并且评估每一个产品对每一个种别的贡献值。
设计个性方案
设计对数据可视化，吸引注意，提升清晰度和保持和你的网站项目的视觉整体性非常重要。这个图表库非常有帮助的生产区工作服、工鞋管理规程是，个性化非常简单
添加文字
为了更高的清晰度，你可以提供你的视觉化方案额外的文字。比如，我将给竖轴1个标题缤纷加上1个临时的图表标签：
色彩设置
你可以加上色彩，通过1个色盘 (chart.palette())并改变在其他东西中的背景设置(chart.background()) 。或你可使用1个主题：
然后你需要在图表设置中声明：
图表互动
使1个JavaScript图表有1些互动其实不是甚么大事。
可能最基本的方法在于使在数据点上的悬浮状态改变色彩或加上或改变标记。被选择的状态决定了每一个节点在被点击后看上去是怎样样的。
1些简单的基于悬浮和选择的互动是默许有的，所以现在我们不会在之前例子上加任何东西。请返回之前的例子来探索基本的互动，如果你想的话。
谈论tooltip元素是值得的，它可以漂浮当1个节点是悬停状态时。我常常试着利用好tooltip，通过使它们展现1些关于这个节点属于哪一个项目，展现的甚么数值，诸如此类的有用信息。你可以轻松地调剂你的tooltip来展现任何事。我们将介绍tooltip并且声明将要展现的东西：
下面是结果：
这只是1个简单的关于个性化方案的基本，深入下去可以写1大篇文章。现在，我建议你去读读文档的交互部份以获得更多信息。
结论
正如你说看到的，用JavaScript构建图表其实不难。而且，你可以在我的CodePen合集中找到所有教程的例子并且轻松地在你的工作中应用。只要复制下代码，改变数据，你的项目就能够快速运作了。请记得随时检查文档或API 指引并且注意你正在使用的库的demo，例如AnyChart的库。通常来讲，找到有和你需要的相近的例子其实不困难，找到最符合的例子，做些修改，就能够如你所需要的那样使用了。
文章来源：WebDesigner Depot
原作者：Ruslan Borovikov