当需要比较数值时，柱状图是一种简单而强大的显示数据的方法。本文将学习如何制作它的不同变体（单系列、多系列、数值堆叠和100%堆叠），并在几行JS代码中应用有效的自定义。
本文作者表示，作为一名板球迷，她观看了去年10月在澳大利亚举办的ICC男子T20板球世界杯比赛。她决定使用一些与这些比赛相关的数据来进行可视化说明。在本文教程中构建的JavaScript柱状图将让人们可以了解击球统计数据，更准确地说，是T20板球世界杯比赛中排名前十的击球手得分。
1.基本JS柱状图
只需四个步骤即可轻松构建基本的JavaScript柱形图。以下展示在每个步骤中要做什么，并解释将编写的每一行代码。
A.创建容器
首先，需要为图表设置一个地方。
如果已经有一个想要放置的网页，可以打开HTML文件，如果没有，可以从头创建一个。然后添加一个块级HTML元素并为它提供一个ID。另外，设置它的宽度、高度和其他样式参数来满足需求。
在创建了一个非常基本的HTML页面之后，添加一个 快速创建Web交互式图表的最简单方法是使用现有的JavaScript图表库之一。它们是一组预先编写的图表代码，这使得用最少的额外编码工作就可以构建数据可视化。 不管具体的库是什么，创建柱状图的步骤基本上都是相同的。无论选择哪种，通过在部分的 然后，使用内置函数创建一个JS柱状图实例，并使用准备好的数据添加一个系列。 为坐标轴和图表本身添加始终是一个很好的做法，以使所表示的内容更加明显。以下设置这些： 最后，设置容器元素(这里是需要它的ID的地方)，并将生成的柱形图可视化显示出来。 在这个案例中，下面是＜script＞标记中的整个JS代码当前的样子： 一个功能基本的JavaScript柱形图完成了，可以在Playground上找到此图的交互式版本以及完整的源代码。 然后，使用内置函数创建一个JS柱状图实例，并使用准备好的数据添加一个系列。 柱状图是为了便于比较而设计的。在这里，可以看到Virat Kohli是如何领先于其他人的，而其他人彼此接近。 但这只是开始，现在想知道这些球员是如何得分的。更准确地说，想知道总共有多少分是通过击球得出6分、4分或在三柱门之间跑动得分的。多系列柱状图或堆叠柱状图可以很好地表示这一点。 所以，将在JS中更深入地研究柱状图，可以展示如何制作这两个柱状图，然后进行美化。 与单系列柱状图一样，可以使用JavaScript快速轻松地创建多系列柱状图。实际上，基数保持不变，只需要改变数据。 在此不计算总分，而是计算前10名得分手(1)个6分、(2)4分 (3) 在三柱门之间跑动的得分相加。从相同的数据源ESPNcricinfo获取这些数据，并创建一个数据集： 接下来，需要将这些数据映射到三个系列，每个系列表示一个类别。第一个系列表示在三柱门之间跑动的得分。还有一个系列表示击球得出4分的得分。第三个系列显示的是击球得出6分的得分。 现在是使用分别映射的数据创建三个系列的时候了。 一个基本的JS多系列柱状图与分组系列已经准备好了，可以在Playground上查看其完整源代码的交互式版本。 分组的多系列柱状图很大程度上代表了分数类别的细分。但总数值也值得一看。那么，现在可以创建堆叠柱状图。 要将分组列转换为堆叠柱状图，只需一行JavaScript代码就足够了。 开启Y-scale堆叠模式： 现在已经有了一个基本的JS堆叠柱状图! 它的交互式可视化在Playground上提供了完整的源代码。 然后可以对这个图进行美化。 根据需求如何定制基于JavaScrip的堆叠柱状图可视化，可能需要修改不同的内容。将展示一些重要但仍然易于实施的调整。 当将鼠标悬停在交互列上时，工具提示将自动显示每个类别的值。但是哪一个在哪里呢?先命名这个系列，一切都将变得清晰。 与此同时，为什么不稍微改变一下颜色呢?将用ICC T20 2022年板球世界杯官方标志的颜色来绘制这个系列。这将使柱状图看起来更加个性化和美观。 为此创建了一个函数，该函数将接受每个系列、名称以及与之相关的颜色。还将在函数中添加一个stroke属性，该属性将应用于每个系列，以便在每个类别之间创建一种填充颜色。 现在，用刚才创建的函数建立三个系列，并为每个系列分别赋予名称和颜色。 为了进一步提高柱状图的易读性，最好添加一个图例来显示哪种颜色表示哪种类别。这可以通过启用图例轻松完成。还将添加一些字体大小和填充自定义。 可以通过单击相应的图例项来隐藏/显示特定的类别。 正如人们所看到的，一些击球手的名字在X轴上是不可见的。为了纠正这一点，可以旋转标签，以便每个名称都能看到。 默认的列图工具提示显示单个类别值，但不显示总数。此外，总数不包括在数据集中。但是很容易让它们自动计算，然后把它们放在某个地方，例如，在工具提示中。 此外，还可以使用联合模式在工具提示中一起显示所有类别的值。 最后，将图表变大一点，改变它的字体颜色，并添加一些填充。 堆叠柱状图都是定制的，可以看看它已经变得多么令人惊叹和印象深刻！可以在Playground上随意查看这个基于JS的交互式堆叠柱状图，还可以进一步使用它的代码、添加数据等等。 看起来很直观，不是吗?可以清楚地看到总得分，例如一些击球手在三柱门之间的跑动得分，而另一些击球手则通过他们的击球获得更多的得分。 最后，将演示如何创建100%堆叠的柱状图表示，它可以帮助以更简单的方式比较所有数据点上的单个类别。 只需将堆叠模式从值改为百分比，堆叠柱状图将变成100%堆叠柱状图： 这就是本教程的最后一个数据可视化示例，可以在Playground上查看这个基于Javascript的百分比堆叠柱状图变体的完整代码。 在本文中的教程中，展示了如何以不同的形式创建JavaScript(HTML5)柱状图，例如常规的单系列柱状图、多系列分组柱状图、数值堆叠柱状图和100%堆叠柱状图。还了解了如何自定义它们。 在这里使用的是AnyChartJavaScript图表库，但还有其他多种图表库以供使用。从根本上来说，这个过程对于任何人都是相似的。所以可以使用任何适合自己需要的图表库。 正如板球比赛的击球分数所显示的那样，总体数字包括大量的边界，但也包括相当多的跑动。所以，采用更多的柱状图和其他数据可视化将这些数据都展现出来。 文章How to Create Column Charts With JavaScript，作者：Shachee SwadiaHTML
B.包含脚本文件
JavaScript
// create a column chart
var chart = anychart.column();
// create a data series
var series = chart.column([
["Virat Kohli", "296", "India"],
["Max O'Dowd", "242", "Netherlands"],
["Suryakumar Yadav", "239", "India"],
["JD Butler", "225", "England"],
["Kusal Mendis", "223", "Sri Lanka"],
["Sikandar Raza", "219", "Zimbabwe"],
["Pathum Nissanka", "214", "Sri Lanka"],
["AD Hales", "212", "England"],
["Lorkan Tucker", "204", "Ireland"],
["Glenn Phillips", "201", "New Zealand"]
]);JavaScript
// add axis titles
chart.xAxis().title("Batsman");
chart.yAxis().title("Number of runs");
// add a chart title
chart.title("Top 10 Run Scorers at ICC Men's T20 World Cup 2022");JavaScript
// set the container element
chart.container("container");
// display the chart
chart.draw()JavaScript
anychart.onDocumentReady(function () {
// create a column chart
var chart = anychart.column();
// create a data series
var series = chart.column([
["Virat Kohli", "296", "India"],
["Max O'Dowd", "242", "Netherlands"],
["Suryakumar Yadav", "239", "India"],
["JD Butler", "225", "England"],
["Kusal Mendis", "223", "Sri Lanka"],
["Sikandar Raza", "219", "Zimbabwe"],
["Pathum Nissanka", "214", "Sri Lanka"],
["AD Hales", "212", "England"],
["Lorkan Tucker", "204", "Ireland"],
["Glenn Phillips", "201", "New Zealand"]
]);
// add axis titles
chart.xAxis().title("Batsman");
chart.yAxis().title("Number of runs");
// add a chart title
chart.title("Top 10 Run Scorers at ICC Men's T20 World Cup 2022");
// set the container element
chart.container("container");
// display the chart
chart.draw();
});结果1：柱状图
2.基本JS多系列柱状图
添加多系列数据
JavaScript
var dataSet = anychart.data.set([
["Virat Kohli", "India", "148", "100", "48"],
["Max O'Dowd", "Netherlands", "106", "88", "48"],
["Suryakumar Yadav", "India", "81", "104", "54"],
["JD Butler", "England", "87", "96", "42"],
["Kusal Mendis", "Sri Lanka", "95", "68", "60"],
["Sikandar Raza", "Zimbabwe", "89", "64", "66"],
["Pathum Nissanka", "Sri Lanka", "114", "52", "48"],
["AD Hales", "England", "76", "76", "60"],
["Lorkan Tucker", "Ireland", "104", "76", "24"],
["Glenn Phillips", "New Zealand", "77", "76", "48"]
]);映射数据
JavaScript
var firstSeriesData = dataSet.mapAs({x: 0, value: 4});
var secondSeriesData = dataSet.mapAs({x: 0, value: 3});
var thirdSeriesData = dataSet.mapAs({x: 0, value: 2});创建系列
JavaScript
var series;
series = chart.column(firstSeriesData);
series = chart.column(secondSeriesData);
series = chart.column(thirdSeriesData);结果2：多系列柱状图
3.基本JS堆叠柱状图
设置数值堆叠方式
JavaScript
chart.yScale().stackMode("value");结果3：堆叠柱状图
4.自定义JS堆叠柱状图
调整系列
JavaScript
var setupSeries = function (series, name, color) {
series.name(name).stroke("2 #fff 1").fill(color);
};JavaScript
// store the series
var series;
// create the first series with the function
series = chart.column(firstSeriesData);
setupSeries(series, "Runs scored with Sixes", "#eb2362");
// create the second series with the function
series = chart.column(secondSeriesData);
setupSeries(series, "Runs scored with Fours", "#00b1e5");
// create the third series with the function
series = chart.column(thirdSeriesData);
setupSeries(series, "Running between the wickets", "#0f0449");添加图例
JavaScript
1chart.legend().enabled(true).fontSize(14).padding([10, 0, 0, 0]);增强标签、工具提示和
JavaScript
chart.xAxis().labels().rotation(-90);JavaScript
chart.tooltip().titleFormat(function () {
return this.x + " — " + this.points[0].getStat("categoryYSum");
});JavaScript
chart.tooltip().displayMode("union");JavaScript
chart.title().fontSize(20).fontColor("#2b2b2b").padding([5, 0, 0, 0]);结果4：自定义堆叠柱图
5.JS 100%堆叠柱状图
切换列堆叠模式
JavaScript
chart.yScale().stackMode("percent");结果5：100%堆叠柱状图
结论
