AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
本文是一個循序漸進的指南，將向您展示如何構建一個交互式JavaScript范圍圖，以可視化方式顯示洛杉磯湖人隊20年來科比·布萊恩特的表現。
出于明顯的原因，2020年是非常凄慘的一年。但是，甚至在疫情之前，籃球傳奇人物科比·布萊恩特（Kobe Bryant）的去世，這一年就開始令人難過。他是NBA的明星球員，曾與洛杉磯湖人隊（Los Angeles Lakers）一起效力過20年。
在那次可怕的車禍發生一年后，我想起了科比，我想知道湖人在他的兩個十年中的表現如何。因此，在純JavaScript的幫助下，我在交互式Divingging Bar Chart中可視化了這一點。
考慮到該項目可能對Web制圖的新手有所幫助，我還記錄了整個過程并制作了一個教程。一探究竟！
什么是發散條形圖？
首先，我將簡要介紹什么是不同的條形圖，然后我們將深入研究本教程。
發散的條形圖顯示了從中間基線繪制的兩個或多個度量，向右和向左（水平范圍條）或頂部和底部（垂直范圍列）延伸。
在這種不同的圖表中，數據可視化的關鍵點是通過針對分叉的中點顯示它們來促進多個類別的比較。
在本教程中，我將使用分散的條形圖技術來展示在科比·布萊恩特20年職業生涯中洛杉磯湖人隊的得失。
這是最后一張圖表的速覽，讓您為比賽的開始做好準備！跟著我學習如何使用JavaScript創建這個漂亮的范圍條形圖。
如何通過4個基本步驟構建JavaScript分流條形圖
那里有多個JavaScript庫，它們為常用功能提供了預編寫的JS代碼，這些代碼可以使交互式數據可視化過程變得非常快速和直接。
我選擇了一個名為AnyChart的圖表來創建此分散的條形圖。這個JS圖表庫似乎開箱即用地支持（在這種情況下特別有用）范圍圖，并且還足夠靈活地執行我想要的操作。
而且，即使對于初學者來說，也很容易上手AnyChart，因為這里有很多現成的示例，并且包含大量文檔。
當然，擁有良好的HTML和JavaScript技能可以使您在Web上可視化數據時具有優勢。但是無論如何，關于使用好的圖表庫的最好的部分是，即使沒有太多的經驗，它們也使創建交互式圖表變得相當簡單。
幾乎可以創建任何JS圖表的整個過程，包括像這樣的分散條形圖，可以分為四個基本步驟：
-
創建一個HTML頁面。
-
參考必要的JS文件。
-
設置數據。
-
編寫圖表的JS代碼。
現在讓我們詳細介紹每個步驟。
1.創建一個基本的HTML頁面
我們需要做的第一件事是創建一個基本的HTML頁面。讓我們給它一個標題，并創建一個HTML塊元素來保存圖表。為了<div>在以后的代碼中識別出這一點，我們還應該給它一個id屬性（讓它成為“容器”）。
<html>
<head>
<title>JavaScript Diverging Bar 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>
請注意，可以在<style>塊內指定width和height參數來修改圖表將占用的空間。我在兩個參數中都輸入了100％，因此圖表占據了整個頁面。
2.包含必要的JavaScript文件
接下來，我們需要添加圖表庫腳本，這將有助于創建數據可視化。由于我們在這里使用AnyChart庫，因此讓我們包括CDN中的相應文件。（請記住，如果需要，您始終可以下載腳本。）
對于不同的條形圖，我們需要基本模塊腳本，該腳本將添加到<head>HTML頁面的部分中。
<html>
<head>
<title>JavaScript Diverging Bar Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the JS diverging bar chart will come here
</script>
</body>
</html>
3.添加數據
我想將1996年至2016年整個賽季洛杉磯湖人隊的獲勝和失敗人數可視化。因此，我從NBA網站獲取了數據，并創建了包含年份，獲勝和失敗的數組。
由于數據量不是很大，所以我們可以像這樣添加它：
var winlossData = [
[65, 17, "2015-16"],
[61, 21, "2014-15"],
[55, 27, "2013-14"],
[37, 45, "2012-13"],
[25, 41, "2011-12"],
[25, 57, "2010-11"],
[25, 57, "2009-10"],
[17, 65, "2008-09"],
[25, 57, "2007-08"],
[40, 42, "2006-07"],
[37, 45, "2005-06"],
[48, 34, "2004-05"],
[26, 56, "2003-04"],
[32, 50, "2002-03"],
[24, 58, "2001-02"],
[26, 56, "2000-01"],
[15, 67, "1999-00"],
[19, 31, "1998-99"],
[21, 61, "1997-98"],
[26, 56, "1996-97"]
];
現在已經準備好階段，讓我們開始添加可創建交互式Diverging Bar Chart的JavaScript代碼！
4.編寫圖表的JavaScript代碼
首先，我們需要添加一個包含所有JS代碼的函數，以確保其中的整個代碼僅在頁面加載后才能執行。
<script>
anychart.onDocumentReady(function() {
// The place for the JS diverging bar chart code
});
</script>
通常，創建JS分散條形圖非常容易，我將逐步指導您完成每個操作。因此，準備扭動，阻擋和射擊！
首先，我們創建一個條形圖并在封閉anychart.onDocumentReady()函數內部輸入數據。
// create a bar chart
var chart = anychart.bar();
// data
var winlossData = [
[65, 17, "2015-16"],
[61, 21, "2014-15"],
[55, 27, "2013-14"],
[37, 45, "2012-13"],
[25, 41, "2011-12"],
[25, 57, "2010-11"],
[25, 57, "2009-10"],
[17, 65, "2008-09"],
[25, 57, "2007-08"],
[40, 42, "2006-07"],
[37, 45, "2005-06"],
[48, 34, "2004-05"],
[26, 56, "2003-04"],
[32, 50, "2002-03"],
[24, 58, "2001-02"],
[26, 56, "2000-01"],
[15, 67, "1999-00"],
[19, 31, "1998-99"],
[21, 61, "1997-98"],
[26, 56, "1996-97"]
];
接下來，我們創建一個接受兩個參數的函數-列號和名稱。列號指示數據集中的列，名稱指示序列。在我們的案例中，我們有兩個系列-一個代表獲勝次數，一個代表失落次數。
因為我們想要一個分散的條形圖，所以讓我們以中心為坐標，在右邊繪制獲勝的條形圖，在左邊繪制損失的條形圖。然后，我們應該通過“ for”循環添加所有必需的值來準備數據集。
如果這聽起來有點復雜，請不要擔心。這只是要準備好我們的數據進行繪制，當您查看下面的代碼時，您可能會發現它們完全是合乎邏輯的。
我們還需要在函數中包含兩件事。我們使用該rangeBar函數定義了一個系列，并添加了一行以指示該系列的名稱，并在左右條之間添加了分隔線。
var createSeries = function (columnNumber, name) {
var data = [];
for (var i = 0; i < winlossData.length; i++) {
var value = winlossData[i][columnNumber];
var center = 0;
if (name === "Wins") {
data.push({
x: winlossData[i][2],
low: center,
high: center + value,
value: value
});
} else {
data.push({
x: winlossData[i][2],
low: -center,
high: -center - value,
value: value
});
}
}
var series = chart.rangeBar(data);
series.name(name);
};
現在，我們使用剛剛定義的函數用所需的參數創建兩個系列。
createSeries(0, "Losses");
createSeries(1, "Wins");
中場休息，最復雜的部分結束了！現在，我們有了圖表的設置。
將標題添加到不同的條形圖中：
chart
.title()
.enabled(true)
.text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");
并啟用圖表的圖例：
chart
.legend()
.enabled(true);
為了使每年的贏利彼此相鄰，我們應該將多系列條形圖轉換為堆積的條形圖。接下來，為了強調差異，讓我們在0處添加一個線標記。最后，我們分配容器div并繪制圖表：
// create a stacked bar chart from the multi-series bar chart
chart.yScale().stackMode("value");
// set a container id for the chart
chart.container("container");
// initiate chart drawing
chart.draw();
這就是哨子了，這就是用JavaScript構建的非常基本但功能齊全的交互式發散條形圖！
盡管科比在他職業生涯的最后幾場比賽中表現出色，但我們可以看到湖人在他過去的幾年中苦苦掙扎，虧損多于勝利。但是總的記錄肯定比失敗多得多。
請看一下此散布條形圖的初始版本，以及在CodePen [或在AnyChart Playground ]上的完整JS / CSS / HTML代碼。
<html>
<head>
<title>JavaScript Diverging Bar Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create a bar chart
var chart = anychart.bar();
// data
var winlossData = [
[65, 17, "2015-16"],
[61, 21, "2014-15"],
[55, 27, "2013-14"],
[37, 45, "2012-13"],
[25, 41, "2011-12"],
[25, 57, "2010-11"],
[25, 57, "2009-10"],
[17, 65, "2008-09"],
[25, 57, "2007-08"],
[40, 42, "2006-07"],
[37, 45, "2005-06"],
[48, 34, "2004-05"],
[26, 56, "2003-04"],
[32, 50, "2002-03"],
[24, 58, "2001-02"],
[26, 56, "2000-01"],
[15, 67, "1999-00"],
[19, 31, "1998-99"],
[21, 61, "1997-98"],
[26, 56, "1996-97"]
];
// configure a function to create series
var createSeries = function (columnNumber, name) {
var data = [];
for (var i = 0; i < winlossData.length; i++) {
var value = winlossData[i][columnNumber];
var center = 0;
if (name === "Wins") {
data.push({
x: winlossData[i][2],
low: center,
high: center + value,
value: value
});
} else {
data.push({
x: winlossData[i][2],
low: -center,
high: -center - value,
value: value
});
}
}
var series = chart.rangeBar(data);
series.name(name);
};
// create series
createSeries(0, "Losses");
createSeries(1, "Wins");
// set the chart title
chart
.title()
.enabled(true)
.text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");
// enable the chart legend
chart
.legend()
.enabled(true);
// create a stacked bar chart from the multi-series bar chart
chart.yScale().stackMode("value");
// set a container id for the chart
chart.container("container");
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
如何自定義我們的JavaScript分散條形圖
關于使用JavaScript進行交互式數據可視化的一個扣籃，是我們必須自定義它的自由，以便我們的數據能夠講述更好的故事。我將向您展示如何對基于JS的基本發散條形圖進行一些快速更改，以使其更具吸引力和信息量。
現在，我將拋出一個三指針并自定義圖表以改善其某些功能和美觀性。
1.基本樣式和軸設置
首先，讓我們更改X和Y軸的一些基本樣式和設置，以使內容更具可讀性。
只要記住，在AnyChart的，一個范圍條形圖是垂直版本范圍柱形圖。因此，在我們的分散條形圖中，水平軸為Y軸，垂直軸為X軸。
因此，讓我們擺脫刻度線，配置軸標題，并自定義垂直軸上的標簽。我們還將最大值設置為80，并從水平軸上的標簽中刪除減號：
chart
.xAxis()
.ticks(false);
chart
.xAxis()
.title()
.enabled(true)
.text("Years")
.padding([0, 0, 10, 0]);
chart
.xAxis()
.labels()
.fontSize(11)
.fontColor("#474747")
.padding([0, 10, 0, 0]);
chart.yScale().maximum(80);
chart
.yAxis(0)
.labels()
.format(function () {
return Math.abs(this.value);
});
接下來，為了強調差異，最好在兩個系列之間添加一個白色描邊，并在0處添加一個線標記。
// add the stroke by setting it in this line
series.name(name).stroke("3 #fff 1");
...
// create a line marker at 0
chart
.lineMarker()
.value(0)
.stroke("#CECECE");
在我們進行更多自定義之前，我需要做一個小題外話。我還想到了使水平軸以百分比而不是絕對值顯示每個賽季的獲利和損失。這很容易，但是結果并沒有提供任何額外的見解。
而且，絕對值確實代表了湖人隊一年中玩多少場比賽。最終，這就是為什么我決定保留絕對值的原因。但是歡迎您在CodePen [或AnyChart Playground ]上查看帶有百分比的版本。
好吧，讓我們從錯過的鏡頭繼續前進，然后回到對焦模式。
2.工具提示自定義
接下來，我自定義了工具提示，以使其內容更豐富，更有趣。
在這里，我還想到了將先前計算出的百分比值（請參閱上面的示例）作為我們分散的條形圖工具提示中的額外信息展示的想法。
因此，第一步是實現百分比值的計算：
// calculate percentages for the tooltip
var val = winlossData[i][columnNumber] * 100;
if (columnNumber == 0) {
var percentValue =
val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
} else {
var percentValue =
val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
}
percentValue = percentValue.toFixed(2);
百分比計算是系列配置功能的一部分-查看它如何包含在其中：
// configure a function to create series
var createSeries = function (columnNumber, name) {
var data = [];
for (var i = 0; i < winlossData.length; i++) {
// calculate percentages for the tooltip
var val = winlossData[i][columnNumber] * 100;
if (columnNumber == 0) {
var percentValue =
val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
} else {
var percentValue =
val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
}
percentValue = percentValue.toFixed(2);
var value = winlossData[i][columnNumber];
var center = 0;
if (name === "Wins") {
data.push({
x: winlossData[i][2],
low: center,
high: center + value,
value: value,
// add the calculated percentage value
percentValue: percentValue
});
} else {
data.push({
x: winlossData[i][2],
low: -center,
high: -center - value,
value: value,
// add the calculated percentage value
percentValue: percentValue
});
}
}
然后，我們還提供了其他工具提示格式，以使它們看起來既整潔又美觀：
// customize the tooltip
chart
.tooltip()
.useHtml(true)
.fontSize(12)
.titleFormat(function () {
return this.getData("x") + " " + this.seriesName;
})
.format(function () {
return (
"<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Total games: " +
"<b>" +
this.getData("value") +
"</b></h6>" +
"<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Percentage games: " +
"<b>" +
this.getData("percentValue") +
" %</b></h6>"
);
});
3.調色板更改
好吧，最后一次自定義絕對是一把匕首-這張照片將使這張圖表看起來非常棒，并贏得比賽！它只是在更改調色板以匹配洛杉磯湖人隊球衣的顏色。很簡單：
chart.palette(
anychart.palettes.distinctColors().items(["#FDB827", "#542583"])
);
series.name(name).stroke("3 #fff 1").selectionMode("none");
好的！最終的交互式JavaScript差異范圍條形圖可在CodePen [和AnyChart Playground ]上獲得。
以防萬一，HTML頁面的完整代碼就在這里：
<html>
<head>
<title>JavaScript Diverging Bar Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create a bar chart
var chart = anychart.bar();
// data
var winlossData = [
[65, 17, "2015-16"],
[61, 21, "2014-15"],
[55, 27, "2013-14"],
[37, 45, "2012-13"],
[25, 41, "2011-12"],
[25, 57, "2010-11"],
[25, 57, "2009-10"],
[17, 65, "2008-09"],
[25, 57, "2007-08"],
[40, 42, "2006-07"],
[37, 45, "2005-06"],
[48, 34, "2004-05"],
[26, 56, "2003-04"],
[32, 50, "2002-03"],
[24, 58, "2001-02"],
[26, 56, "2000-01"],
[15, 67, "1999-00"],
[19, 31, "1998-99"],
[21, 61, "1997-98"],
[26, 56, "1996-97"]
];
// configure a function to create series
var createSeries = function (columnNumber, name) {
var data = [];
for (var i = 0; i < winlossData.length; i++) {
// calculate percentages for the tooltip
var val = winlossData[i][columnNumber] * 100;
if (columnNumber == 0) {
var percentValue =
val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
} else {
var percentValue =
val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
}
percentValue = percentValue.toFixed(2);
var value = winlossData[i][columnNumber];
var center = 0;
if (name === "Wins") {
data.push({
x: winlossData[i][2],
low: center,
high: center + value,
value: value,
// add the calculated percentage value
percentValue: percentValue
});
} else {
data.push({
x: winlossData[i][2],
low: -center,
high: -center - value,
value: value,
// add the calculated percentage value
percentValue: percentValue
});
}
}
var series = chart.rangeBar(data);
series.name(name).stroke("3 #fff 1").selectionMode("none");
};
// create series
createSeries(0, "Losses");
createSeries(1, "Wins");
// set the chart title
chart
.title()
.enabled(true)
.text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");
// enable the chart legend
chart
.legend()
.enabled(true);
// create a stacked bar chart from the multi-series bar chart
chart.yScale().stackMode("value");
// customize the settings of the axes
chart
.xAxis()
.ticks(false);
chart
.xAxis()
.title()
.enabled(true)
.text("Years")
.padding([0, 0, 10, 0]);
chart
.xAxis()
.labels()
.fontSize(11)
.fontColor("#474747")
.padding([0, 10, 0, 0]);
chart.yScale().maximum(80);
chart
.yAxis(0)
.labels()
.format(function () {
return Math.abs(this.value);
});
// create a line marker at 0
chart
.lineMarker()
.value(0)
.stroke("#CECECE");
// customize the tooltip
chart
.tooltip()
.useHtml(true)
.fontSize(12)
.titleFormat(function () {
return this.getData("x") + " " + this.seriesName;
})
.format(function () {
return (
"<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Total games: " +
"<b>" +
this.getData("value") +
"</b></h6>" +
"<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Percentage games: " +
"<b>" +
this.getData("percentValue") +
" %</b></h6>"
);
});
// set a custom color palette
chart.palette(
anychart.palettes.distinctColors().items(["#FDB827", "#542583"])
);
// set a container id for the chart
chart.container("container");
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
結論
在本教程中，我向您展示了使用JavaScript建立并運行分散的條形圖是多么快速和容易。我們還看到了一點點的努力如何使圖形看起來真的很酷，并使您從基礎數據中獲得更多收益。請讓我知道，如果你有任何問題。
如果您有動力與更多基于JS的交互式數據可視化一起工作，請繼續并嘗試使用CodePen上不同的條形圖（我在本教程中添加了鏈接），查看其他圖表選項，或嘗試其他JavaScript庫。
另外，當我們在這里回顧籃球傳奇球隊的統計數據時，請記住要進行更多的運動并創建更多的可視化效果！
相關產品推薦：
AnyGantt-構建復雜且內容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業生產效率，真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線