代码详解 | 天啊，原来JS还可以这样玩“劈腿”

论坛 › 期权论坛 › 期权     
读芯术   2019-6-8 05:29   4749   0



全文共3271字，预计学习时长9分钟





在这个有图有真相的时代，数据也需要“看脸”了。以美貌著称的PPT美工在职场中完美胜出。某投行曾开出60万年薪，重金求“美”。一众码农纷纷表示：酸了！累死累活搞不过写PPT的？！

你以为老板稀罕的是PPT酷炫的跳转？跳脱的配色？不，老板的眼里，只有能看懂的数据。一心钻研JS的码农们表示不服：一切能用JS解决的问题最终将会用JS实现，数据可视化也不例外！条形、饼状、径向柱图，几行代码轻松拿下~

数据可视化可以帮助用户轻松理解复杂的想法、快速识别模式和趋势、实现呈现数据的充分利用。数据爆炸的时代，提取、清理和可视化数据对解释数据而言显得尤为重要。

在JavaScript编程领域，有几个图表库可以让开发人员创建令人惊叹的图表并轻松地实现数据可视化。如Google Charts、AnyChart、D3和Highcharts等。这几个库的创建过程几乎一致，功能上又有各自不同的特性。

别再用JavaScript一心一意写代码啦，偶尔“劈腿”做做图，也OK的啦~本文是一篇JS交互式条形图教程，以AnyChart 为例，大家尽情享用吧~




一．如何通过3个步骤创建简单的JS条形图



下面是三个简单的步骤，你可以使用JavaScript创建一个基本图表，并将其集成到您的网站或应用程序中。
准备数据
连接到JS图表库
编写代码

1. 准备数据

事先准备非结构化数据，以便更轻松地将它加载到图表库中。根据你选择的库，以其接受的格式准备数据。譬如，AnyChart支持各种数据格式，包括Google Spreadsheet、XML、CSV、HTML和JSON格式等。

创建大多数图表时，只需提供X和Y轴的值即可。创建条形图甚至更简单，因为你只需要提供Y轴的值，并用索引编号或项目编号来表示X轴的值。

例如，如果我们以数组格式准备数据，x是项目编号，y是数据值。

  1. var data = [120, 60, 30, 80, 50];
复制代码
  1.    // X is item numbers [0,1,2,3,4,5]
复制代码
  1.    //Y is the data values
复制代码

另外，如果数据是JSON格式的，它可能如下所示：

  1. [{
复制代码
  1.         'x': Item One',
复制代码
  1.         'value': 120
复制代码
  1.     },{
复制代码
  1.         'x': 'Item Two',
复制代码
  1.         'value': 60
复制代码
  1.     }...]
复制代码
2. 连接到图表库

要连接到首选的JavaScript图表库，你可以选择下载相关软件包并将其存储在本地或使用CDN服务。通常建议使用CDN，因为它允许你从最靠近受众的服务器加载库的文件，从而提供快速的页面加载速度和强大的性能。

AnyChart使用基于模块的系统，使你只能连接项目中所需的图表类型和功能，从而大大缩小了应用程序上运行的代码大小。

例如，如果我们想使用AnyChart JS创建条形图，需要添加以下Core和基本笛卡尔模块：

  1. [/code][code]
复制代码

3. 编写代码

下面是编写一些用于创建基本JS条形图的代码的步骤。
            
a. 首先在HTML页面上创建一个引用条形图的容器。

  1. [/code]
  3. b. 然后，输入准备的数据（请注意，数据由某些网站每分钟收到的网络流量的任意值组成）。
  5. [list][*][*][*][*][*][*][*][/list][code]var data = [
复制代码
  1.         {x: 'Amazon', y: 120},
复制代码
  1.         {x: 'DZone', y: 60},
复制代码
  1.         {x: 'Gizmodo', y: 30},
复制代码
  1.         {x: 'StackOverFlow', y: 80},
复制代码
  1.         {x: 'CNET', y: 50}
复制代码
  1.     ];
复制代码

c. 其次，根据适用的图表构造函数来定义我们想要创建的图表类型。

  1. var chart = anychart.bar();
复制代码

d. 设置图表和轴的标题。

  1. chart.title('Website Traffic Stats');
复制代码
  1. chart.xAxis().title("Website");
复制代码
  1. chart.yAxis().title("Traffic Per Minute");
复制代码

e. 创建一个条形系列并传递数据。

  1. var series = chart.bar(data);
复制代码

f. 将图表指向我们创建的container id.

  1. chart.container("container");
复制代码

g. 开始绘制条形图。

  1. chart.draw();
复制代码

以下是图表在浏览器上的外观：




使用AnyChart JavaScript库创建基本条形图的完整代码如下所示：

  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. anychart.onDocumentLoad(function() {
复制代码
  1. //create the data
复制代码
  1. var data = [
复制代码
  1.         {x: 'Amazon', y: 120},
复制代码
  1.         {x: 'DZone', y: 60},
复制代码
  1.         {x: 'Gizmodo', y: 30},
复制代码
  1.         {x: 'StackOverFlow', y: 80},
复制代码
  1.         {x: 'CNET', y: 50}
复制代码
  1.     ];
复制代码
  1. var chart = anychart.bar(); //create a chart
复制代码
  1. chart.title('Website Traffic Stats');//create title for the chart
复制代码
  1. chart.xAxis().title("Website");//create name for X axis
复制代码
  1. chart.yAxis().title("Traffic Per Minute"); //create name for Y axis
复制代码
  1. var series = chart.bar(data); //create bar series and pass data
复制代码
  1. chart.container("container"); //reference the container Id
复制代码
  1. chart.draw(); //initiate drawing the bar chart
复制代码
  1.   });
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码

就是这样！使用AnyChart库创建漂亮的图表非常简单明了。




二．如何创建高级JavaScript条形图



既然我们已经知道如何使用AnyChart来创建条形图，因此，如果需要执行更复杂的数据可视化任务，看看还有可能需要什么。你会发现对于Web开发人员来说，JavaScript图表并非难事。

例如，这里有一些你可以在同一个库中使用的高级开箱即用功能。

1. 创建多系列条形图

除了之前构建的单系列条形图，你可以使用AnyChart JS创建一个多系列条形图，可在图表上展示多组数据。在AnyChart中，“系列“指的是可以在图表上显示的单个数据集。通过多系列图表，你可以直观地显示详细信息，并帮助受众从数据中获得更多见解。

例如，假设数据存在于HTML表格中（请在下面查看表格的代码）。

以下是表格在浏览器上的外观：




要使用AnyChart JS库从数据中构建多系列条形图，首先需要载入数据适配器模块，以帮助将HTML数据加载到工作环境中。

  1. [/code]
  3. 接下来，需要解析HTML表中的数据。
  5. [list][*][/list][code]var dataTable = anychart.data.parseHtmlTable('#dataTable');
复制代码

然后，创建一个图表，并指定数据的来源。

  1. var chart = anychart.bar();
复制代码
  1. chart.data(dataTable);
复制代码

还可以在条形图中添加图例，使读者能够轻松阅读和理解各种值的含义。

  1. var legend = chart.legend();
复制代码
  1. legend.enabled(true); //enable legend
复制代码

运行代码时，我们将获得一个能显示每个值的组成的多系列条形图，以便于比较和理解数据。




以下是创建基于JavaScript的多系列条形图的完整代码：

  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]      Website Traffic
复制代码
  1.       
复制代码
  1.         
复制代码
  1.           Websites / Traffic Source
复制代码
  1.           Organic
复制代码
  1.           Direct
复制代码
  1.           Referral
复制代码
  1.         
复制代码
  1.       
复制代码
  1.       
复制代码
  1.         
复制代码
  1.           Amazon
复制代码
  1.           60
复制代码
  1.           50
复制代码
  1.           10
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           Dzone
复制代码
  1.           30
复制代码
  1.           20
复制代码
  1.           10
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           Gizmodo
复制代码
  1.           20
复制代码
  1.           5
复制代码
  1.           5
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           StackOverFlow
复制代码
  1.           40
复制代码
  1.           30
复制代码
  1.           10
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           CNET
复制代码
  1.           25
复制代码
  1.           5
复制代码
  1.           20
复制代码
  1.         
复制代码
  1.       
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]anychart.onDocumentLoad(function() {
复制代码
  1. var dataTable = anychart.data.parseHtmlTable('#dataTable'); //parse data from HTML table
复制代码
  1. var chart = anychart.bar(); //create chart
复制代码
  1. chart.xAxis().title("Website");//create name for X axis
复制代码
  1. chart.yAxis().title("Traffic Per Minute"); //create name for Y axis
复制代码
  1. chart.data(dataTable); //specify data source
复制代码
  1. var legend = chart.legend();
复制代码
  1. legend.enabled(true); //enable legend
复制代码
  1. chart.container("container"); //reference the container Id
复制代码
  1. chart.draw(); //initiate drawing the bar chart
复制代码
  1. });
复制代码
  1. [/code][code]
复制代码
  1. [/code]
  2. 2. 创建堆叠柱状图
  5. 动态创建堆叠柱状图 ，无需对多系列条形图进行大量更改。AnyChart有两种堆叠图表的方式：值堆叠和百分比堆叠。可以通过将stackMode方法的比例分别设置为“value”和“percent”来选择其中一种堆叠方式。
  7. 以下是如何为基于值的JS堆叠柱状图设置stackMode的代码：
  8. [list][*][/list][code]chart.yScale().stackMode('value');
复制代码

结果如下：





以下是如何设置100%堆叠柱状图的模式：

  1. chart.yScale().stackMode('percent');
复制代码

结果如下：




3. 为图表添加交互性

默认情况下，使用AnyChart库创建的JS图表是交互式的。一些默认图表行为包括：悬停时突出显示系列和点、显示悬停点的工具提示、悬停时突出显示系列的相应图例、单击相应图例项时显示或隐藏系列等。

此外，你可以修改图表的默认交互性，以满足需求和偏好。例如，可以在刚刚构建的100%堆叠柱形图中配置工具提示，以便在每次用户悬停到条形图上的某个点时提供更多信息。

  1. chart.tooltip().title("Traffic Data");
复制代码
  1. chart.tooltip().format("Website: {%categoryName}
复制代码
  1. {%seriesName}: {%value}");
复制代码

结果如下：




下面是用于创建具有附加交互性的JS图表的完整代码：

  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]      Website Traffic
复制代码
  1.       
复制代码
  1.         
复制代码
  1.           Websites / Traffic Source
复制代码
  1.           Organic
复制代码
  1.           Direct
复制代码
  1.           Referral
复制代码
  1.         
复制代码
  1.       
复制代码
  1.       
复制代码
  1.         
复制代码
  1.           Amazon
复制代码
  1.           60
复制代码
  1.           50
复制代码
  1.           10
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           Dzone
复制代码
  1.           30
复制代码
  1.           20
复制代码
  1.           10
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           Gizmodo
复制代码
  1.           20
复制代码
  1.           5
复制代码
  1.           5
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           StackOverFlow
复制代码
  1.           40
复制代码
  1.           30
复制代码
  1.           10
复制代码
  1.         
复制代码
  1.         
复制代码
  1.           CNET
复制代码
  1.           25
复制代码
  1.           5
复制代码
  1.           20
复制代码
  1.         
复制代码
  1.       
复制代码
  1.    
复制代码
  1. [/code][code]anychart.onDocumentLoad(function() {
复制代码
  1. var dataTable = anychart.data.parseHtmlTable('#dataTable'); //parse data from HTML table
复制代码
  1. var chart = anychart.bar(); //create chart
复制代码
  1. chart.xAxis().title("Website");//create name for X axis
复制代码
  1. chart.yAxis().title("Traffic Per Minute"); //create name for Y axis
复制代码
  1. chart.data(dataTable); //specify data source
复制代码
  1. chart.yScale().stackMode('percent');//setting percent stacking
复制代码
  1. var legend = chart.legend();
复制代码
  1. legend.enabled(true); //enable legend
复制代码
  1. chart.tooltip().title("Traffic Data"); //configuring the tooltip
复制代码
  1. chart.tooltip().format("Website: {%categoryName}
复制代码
  1. {%seriesName}: {%value}");
复制代码
  1. chart.container("container"); //reference the container Id
复制代码
  1. chart.draw(); //initiate drawing the bar chart
复制代码
  1. });
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]
复制代码
由此，基于JS库轻松创建的“多功能且交互式的JavaScript（HTML5）图表“就创建完成啦！





留言 点赞 发个朋友圈
我们一起分享AI学习与发展的干货


编译组：王玲、狄思云
相关链接：

https://dzone.com/articles/how-to-create-stunning-interactive-bar-charts-usin


如需转载，请后台留言，遵守转载规范



推荐文章阅读


ACL2018论文集50篇解读
EMNLP2017论文集28篇论文解读
2018年AI三大顶会中国学术成果全链接
ACL2017 论文集：34篇解读干货全在这里
10篇AAAI2017经典论文回顾


长按识别二维码可添加关注
读芯君爱你



回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
读芯术

积分:25
帖子:5
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP