如何使用JavaScript創建柱狀圖
譯文在數據無處不在的情況下，人們應該知道如何以圖形方式表示這些數據，以便更好、更快地理解數據展示的內容。最常見的數據可視化技術之一是柱狀圖，本文將展示如何使用JavaScript輕松創建交互式圖表。
當需要比較數值時，柱狀圖是一種簡單而強大的顯示數據的方法。本文將學習如何制作它的不同變體（單系列、多系列、數值堆疊和100%堆疊），并在幾行JS代碼中應用有效的自定義。
本文作者表示，作為一名板球迷，她觀看了去年10月在澳大利亞舉辦的ICC男子T20板球世界杯比賽。她決定使用一些與這些比賽相關的數據來進行可視化說明。在本文教程中構建的JavaScript柱狀圖將讓人們可以了解擊球統計數據，更準確地說，是T20板球世界杯比賽中排名前十的擊球手得分。
1.基本JS柱狀圖
只需四個步驟即可輕松構建基本的JavaScript柱形圖。以下展示在每個步驟中要做什么，并解釋將編寫的每一行代碼。
A.創建容器
首先，需要為圖表設置一個地方。
如果已經有一個想要放置的網頁，可以打開HTML文件，如果沒有，可以從頭創建一個。然后添加一個塊級HTML元素并為它提供一個ID。另外，設置它的寬度、高度和其他樣式參數來滿足需求。
在創建了一個非常基本的HTML頁面之后，添加一個<div>元素，其ID為“container”，并將其寬度和高度指定為100%，以便產生的基于JS的柱形圖填充整個頁面：
HTML
<html>
<head>
<title>JavaScript Column Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>B.包含腳本文件
快速創建Web交互式圖表的最簡單方法是使用現有的JavaScript圖表庫之一。它們是一組預先編寫的圖表代碼，這使得用最少的額外編碼工作就可以構建數據可視化。
不管具體的庫是什么，創建柱狀圖的步驟基本上都是相同的。無論選擇哪種，通過在<head>部分的<script>標簽中引用它的JavaScript文件，將它包含在網頁中。然后在<head>或<body>部分的任何地方添加另一個<script>標記，這是將放置柱狀圖代碼的地方。
在本文的教程中，為了說明這個過程，將使用AnyChart這個工具。它是一個輕量級的JS圖表庫，有詳細的文檔和許多示例，免費用于非商業用途。因此包含了它的基本模塊：
HTML
<html>
<head>
<title>JavaScript Column Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>C.準備數據
接下來，準備要在柱狀圖中可視化的數據。
本文作者從ESPNcricinfo收集了ICC男子T20世界杯前10名得分手的總得分統計數據，并將它們整理在一個簡單的JavaScript多維數組中。(當然，可以使用不同的數據格式，例如JSON、XML、CSV等)
JavaScript
[
["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"]
] D.編寫可視化代碼
場地已經準備好了，球員們也準備好了，現在是比賽開始的時候了!用JS圖表庫創建柱狀圖就像在板球比賽中擊出六分球一樣——通過更少的努力獲得更多的回報。以下展示如何通過編寫幾行JavaScript代碼來啟動和運行它。
做的第一件事是在<body>部分的<script>標記中添加anychart.onDocumentReady()函數。所有其他的部分都會進入這個函數。
HTML
<script>
anychart.onDocumentReady(function() {
// The following JS code to create a column chart.
});
</script>然后，使用內置函數創建一個JS柱狀圖實例，并使用準備好的數據添加一個系列。
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");最后，設置容器元素(這里是需要它的ID的地方)，并將生成的柱形圖可視化顯示出來。
JavaScript
// set the container element
chart.container("container");
// display the chart
chart.draw()在這個案例中，下面是＜script＞標記中的整個JS代碼當前的樣子：
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：柱狀圖
一個功能基本的JavaScript柱形圖完成了，可以在Playground上找到此圖的交互式版本以及完整的源代碼。
然后，使用內置函數創建一個JS柱狀圖實例，并使用準備好的數據添加一個系列。
柱狀圖是為了便于比較而設計的。在這里，可以看到Virat Kohli是如何領先于其他人的，而其他人彼此接近。
但這只是開始，現在想知道這些球員是如何得分的。更準確地說，想知道總共有多少分是通過擊球得出6分、4分或在三柱門之間跑動得分的。多系列柱狀圖或堆疊柱狀圖可以很好地表示這一點。
所以，將在JS中更深入地研究柱狀圖，可以展示如何制作這兩個柱狀圖，然后進行美化。
2.基本JS多系列柱狀圖
與單系列柱狀圖一樣，可以使用JavaScript快速輕松地創建多系列柱狀圖。實際上，基數保持不變，只需要改變數據。
添加多系列數據
在此不計算總分，而是計算前10名得分手(1)個6分、(2)4分 (3) 在三柱門之間跑動的得分相加。從相同的數據源ESPNcricinfo獲取這些數據，并創建一個數據集：
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"]
]);映射數據
接下來，需要將這些數據映射到三個系列，每個系列表示一個類別。第一個系列表示在三柱門之間跑動的得分。還有一個系列表示擊球得出4分的得分。第三個系列顯示的是擊球得出6分的得分。
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：多系列柱狀圖
一個基本的JS多系列柱狀圖與分組系列已經準備好了，可以在Playground上查看其完整源代碼的交互式版本。
分組的多系列柱狀圖很大程度上代表了分數類別的細分。但總數值也值得一看。那么，現在可以創建堆疊柱狀圖。
3.基本JS堆疊柱狀圖
要將分組列轉換為堆疊柱狀圖，只需一行JavaScript代碼就足夠了。
設置數值堆疊方式
開啟Y-scale堆疊模式：
JavaScript
chart.yScale().stackMode("value");結果3：堆疊柱狀圖
現在已經有了一個基本的JS堆疊柱狀圖! 它的交互式可視化在Playground上提供了完整的源代碼。
然后可以對這個圖進行美化。
4.自定義JS堆疊柱狀圖
根據需求如何定制基于JavaScrip的堆疊柱狀圖可視化，可能需要修改不同的內容。將展示一些重要但仍然易于實施的調整。
調整系列
當將鼠標懸停在交互列上時，工具提示將自動顯示每個類別的值。但是哪一個在哪里呢?先命名這個系列，一切都將變得清晰。
與此同時，為什么不稍微改變一下顏色呢?將用ICC T20 2022年板球世界杯官方標志的顏色來繪制這個系列。這將使柱狀圖看起來更加個性化和美觀。
為此創建了一個函數，該函數將接受每個系列、名稱以及與之相關的顏色。還將在函數中添加一個stroke屬性，該屬性將應用于每個系列，以便在每個類別之間創建一種填充顏色。
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]);可以通過單擊相應的圖例項來隱藏/顯示特定的類別。
增強標簽、工具提示和標題
正如人們所看到的，一些擊球手的名字在X軸上是不可見的。為了糾正這一點，可以旋轉標簽，以便每個名稱都能看到。
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：自定義堆疊柱圖
堆疊柱狀圖都是定制的，可以看看它已經變得多么令人驚嘆和印象深刻！可以在Playground上隨意查看這個基于JS的交互式堆疊柱狀圖，還可以進一步使用它的代碼、添加數據等等。
看起來很直觀，不是嗎?可以清楚地看到總得分，例如一些擊球手在三柱門之間的跑動得分，而另一些擊球手則通過他們的擊球獲得更多的得分。
5.JS 100%堆疊柱狀圖
最后，將演示如何創建100%堆疊的柱狀圖表示，它可以幫助以更簡單的方式比較所有數據點上的單個類別。
切換列堆疊模式
只需將堆疊模式從值改為百分比，堆疊柱狀圖將變成100%堆疊柱狀圖：
JavaScript
chart.yScale().stackMode("percent");結果5：100%堆疊柱狀圖
這就是本教程的最后一個數據可視化示例，可以在Playground上查看這個基于Javascript的百分比堆疊柱狀圖變體的完整代碼。
結論
在本文中的教程中，展示了如何以不同的形式創建JavaScript(HTML5)柱狀圖，例如常規的單系列柱狀圖、多系列分組柱狀圖、數值堆疊柱狀圖和100%堆疊柱狀圖。還了解了如何自定義它們。
在這里使用的是AnyChartJavaScript圖表庫，但還有其他多種圖表庫以供使用。從根本上來說，這個過程對于任何人都是相似的。所以可以使用任何適合自己需要的圖表庫。
正如板球比賽的擊球分數所顯示的那樣，總體數字包括大量的邊界，但也包括相當多的跑動。所以，采用更多的柱狀圖和其他數據可視化將這些數據都展現出來。
文章標題：How to Create Column Charts With JavaScript，作者：Shachee Swadia
