网站首页 > 开源技术正文

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

wxchong 2024-09-14 14:59:59 开源技术 10 ℃ 0 评论

在这个有图有真相的时代，数据也需要“看脸”了。以美貌著称的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是数据值。

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

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

[{
 'x': Item One',
 'value': 120
 },{
 'x': 'Item Two',
 'value': 60
 }...]

2. 连接到图表库

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

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

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

<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>

3. 编写代码

下面是编写一些用于创建基本JS条形图的代码的步骤。

a. 首先在HTML页面上创建一个引用条形图的容器。

<div id="container"></div>

b. 然后，输入准备的数据（请注意，数据由某些网站每分钟收到的网络流量的任意值组成）。

var data = [
 {x: 'Amazon', y: 120},
 {x: 'DZone', y: 60},
 {x: 'Gizmodo', y: 30},
 {x: 'StackOverFlow', y: 80},
 {x: 'CNET', y: 50}
 ];

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

var chart = anychart.bar();

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

chart.title('Website Traffic Stats');
chart.xAxis().title("Website");
chart.yAxis().title("Traffic Per Minute");

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

var series = chart.bar(data);

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

chart.container("container");

g. 开始绘制条形图。

chart.draw();

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

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

<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentLoad(function() {
//create the data
var data = [
 {x: 'Amazon', y: 120},
 {x: 'DZone', y: 60},
 {x: 'Gizmodo', y: 30},
 {x: 'StackOverFlow', y: 80},
 {x: 'CNET', y: 50}
 ];
var chart = anychart.bar(); //create a chart
chart.title('Website Traffic Stats');//create title for the chart
chart.xAxis().title("Website");//create name for X axis
chart.yAxis().title("Traffic Per Minute"); //create name for Y axis
var series = chart.bar(data); //create bar series and pass data
chart.container("container"); //reference the container Id
chart.draw(); //initiate drawing the bar chart
 });
</script>
</div>
</body>
</html>

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

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

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

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

1. 创建多系列条形图

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

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

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

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

<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>

接下来，需要解析HTML表中的数据。

var dataTable = anychart.data.parseHtmlTable('#dataTable');

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

var chart = anychart.bar();
chart.data(dataTable);

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

var legend = chart.legend();
legend.enabled(true); //enable legend

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

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

<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container">
<table id="dataTable" border="1">
 <caption>Website Traffic</caption>
 <thead>
 <tr>
 <th>Websites / Traffic Source</th>
 <th>Organic</th>
 <th>Direct</th>
 <th>Referral</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Amazon</td>
 <td>60</td>
 <td>50</td>
 <td>10</td>
 </tr>
 <tr>
 <td>Dzone</td>
 <td>30</td>
 <td>20</td>
 <td>10</td>
 </tr>
 <tr>
 <td>Gizmodo</td>
 <td>20</td>
 <td>5</td>
 <td>5</td>
 </tr>
 <tr>
 <td>StackOverFlow</td>
 <td>40</td>
 <td>30</td>
 <td>10</td>
 </tr>
 <tr>
 <td>CNET</td>
 <td>25</td>
 <td>5</td>
 <td>20</td>
 </tr>
 </tbody>
</table>
</div>
<script>
anychart.onDocumentLoad(function() {
var dataTable = anychart.data.parseHtmlTable('#dataTable'); //parse data from HTML table
var chart = anychart.bar(); //create chart
chart.xAxis().title("Website");//create name for X axis
chart.yAxis().title("Traffic Per Minute"); //create name for Y axis
chart.data(dataTable); //specify data source
var legend = chart.legend(); 
legend.enabled(true); //enable legend
chart.container("container"); //reference the container Id
chart.draw(); //initiate drawing the bar chart
});
</script>
</body>
</html>

2. 创建堆叠柱状图

动态创建堆叠柱状图，无需对多系列条形图进行大量更改。AnyChart有两种堆叠图表的方式：值堆叠和百分比堆叠。可以通过将stackMode方法的比例分别设置为“value”和“percent”来选择其中一种堆叠方式。

以下是如何为基于值的JS堆叠柱状图设置stackMode的代码：

chart.yScale().stackMode('value');

结果如下：

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

chart.yScale().stackMode('percent');

结果如下：

3. 为图表添加交互性

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

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

chart.tooltip().title("Traffic Data");
chart.tooltip().format("Website: {%categoryName} 
{%seriesName}: {%value}");

结果如下：

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

<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container">
<table id="dataTable" border="1">
 <caption>Website Traffic</caption>
 <thead>
 <tr>
 <th>Websites / Traffic Source</th>
 <th>Organic</th>
 <th>Direct</th>
 <th>Referral</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Amazon</td>
 <td>60</td>
 <td>50</td>
 <td>10</td>
 </tr>
 <tr>
 <td>Dzone</td>
 <td>30</td>
 <td>20</td>
 <td>10</td>
 </tr>
 <tr>
 <td>Gizmodo</td>
 <td>20</td>
 <td>5</td>
 <td>5</td>
 </tr>
 <tr>
 <td>StackOverFlow</td>
 <td>40</td>
 <td>30</td>
 <td>10</td>
 </tr>
 <tr>
 <td>CNET</td>
 <td>25</td>
 <td>5</td>
 <td>20</td>
 </tr>
 </tbody>
 </table>
<script>
anychart.onDocumentLoad(function() {
var dataTable = anychart.data.parseHtmlTable('#dataTable'); //parse data from HTML table
var chart = anychart.bar(); //create chart
chart.xAxis().title("Website");//create name for X axis
chart.yAxis().title("Traffic Per Minute"); //create name for Y axis
chart.data(dataTable); //specify data source
chart.yScale().stackMode('percent');//setting percent stacking
var legend = chart.legend(); 
legend.enabled(true); //enable legend
chart.tooltip().title("Traffic Data"); //configuring the tooltip
chart.tooltip().format("Website: {%categoryName} 
{%seriesName}: {%value}");
chart.container("container"); //reference the container Id
chart.draw(); //initiate drawing the bar chart
});
</script>
</div>
</body>
</html>

由此，基于JS库轻松创建的“多功能且交互式的JavaScript（HTML5）图表“就创建完成啦！

上一篇：最实用的大数据可视化分析工具汇总
下一篇：个人收藏的必备网页设计控件，也许正是你在寻找的(十一)

网站首页 > 开源技术正文

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

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

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

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 开源技术 正文

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

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

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

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 开源技术正文

取消回复欢迎你发表评论: