AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。
點擊下載AnyChart正式版
本文是一個循序漸進(jìn)的指南，將向您展示如何構(gòu)建一個交互式JavaScript范圍圖，以可視化方式顯示洛杉磯湖人隊20年來科比·布萊恩特的表現(xiàn)。
出于明顯的原因，2020年是非常凄慘的一年。但是，甚至在疫情之前，籃球傳奇人物科比·布萊恩特（Kobe Bryant）的去世，這一年就開始令人難過。他是NBA的明星球員，曾與洛杉磯湖人隊（Los Angeles Lakers）一起效力過20年。
在那次可怕的車禍發(fā)生一年后，我想起了科比，我想知道湖人在他的兩個十年中的表現(xiàn)如何。因此，在純JavaScript的幫助下，我在交互式Divingging Bar Chart中可視化了這一點。
考慮到該項目可能對Web制圖的新手有所幫助，我還記錄了整個過程并制作了一個教程。一探究竟！
什么是發(fā)散條形圖？
首先，我將簡要介紹什么是不同的條形圖，然后我們將深入研究本教程。
發(fā)散的條形圖顯示了從中間基線繪制的兩個或多個度量，向右和向左（水平范圍條）或頂部和底部（垂直范圍列）延伸。
在這種不同的圖表中，數(shù)據(jù)可視化的關(guān)鍵點是通過針對分叉的中點顯示它們來促進(jìn)多個類別的比較。
在本教程中，我將使用分散的條形圖技術(shù)來展示在科比·布萊恩特20年職業(yè)生涯中洛杉磯湖人隊的得失。
這是最后一張圖表的速覽，讓您為比賽的開始做好準(zhǔn)備！跟著我學(xué)習(xí)如何使用JavaScript創(chuàng)建這個漂亮的范圍條形圖。
如何通過4個基本步驟構(gòu)建JavaScript分流條形圖
那里有多個JavaScript庫，它們?yōu)槌Ｓ霉δ芴峁┝祟A(yù)編寫的JS代碼，這些代碼可以使交互式數(shù)據(jù)可視化過程變得非常快速和直接。
我選擇了一個名為AnyChart的圖表來創(chuàng)建此分散的條形圖。這個JS圖表庫似乎開箱即用地支持（在這種情況下特別有用）范圍圖，并且還足夠靈活地執(zhí)行我想要的操作。
而且，即使對于初學(xué)者來說，也很容易上手AnyChart，因為這里有很多現(xiàn)成的示例，并且包含大量文檔。
當(dāng)然，擁有良好的HTML和JavaScript技能可以使您在Web上可視化數(shù)據(jù)時具有優(yōu)勢。但是無論如何，關(guān)于使用好的圖表庫的最好的部分是，即使沒有太多的經(jīng)驗，它們也使創(chuàng)建交互式圖表變得相當(dāng)簡單。
幾乎可以創(chuàng)建任何JS圖表的整個過程，包括像這樣的分散條形圖，可以分為四個基本步驟：
-
創(chuàng)建一個HTML頁面。
-
參考必要的JS文件。
-
設(shè)置數(shù)據(jù)。
-
編寫圖表的JS代碼。
現(xiàn)在讓我們詳細(xì)介紹每個步驟。
1.創(chuàng)建一個基本的HTML頁面
我們需要做的第一件事是創(chuàng)建一個基本的HTML頁面。讓我們給它一個標(biāo)題，并創(chuàng)建一個HTML塊元素來保存圖表。為了<div>在以后的代碼中識別出這一點，我們還應(yīng)該給它一個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>塊內(nèi)指定width和height參數(shù)來修改圖表將占用的空間。我在兩個參數(shù)中都輸入了100％，因此圖表占據(jù)了整個頁面。
2.包含必要的JavaScript文件
接下來，我們需要添加圖表庫腳本，這將有助于創(chuàng)建數(shù)據(jù)可視化。由于我們在這里使用AnyChart庫，因此讓我們包括CDN中的相應(yīng)文件。（請記住，如果需要，您始終可以下載腳本。）
對于不同的條形圖，我們需要基本模塊腳本，該腳本將添加到<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.添加數(shù)據(jù)
我想將1996年至2016年整個賽季洛杉磯湖人隊的獲勝和失敗人數(shù)可視化。因此，我從NBA網(wǎng)站獲取了數(shù)據(jù)，并創(chuàng)建了包含年份，獲勝和失敗的數(shù)組。
由于數(shù)據(jù)量不是很大，所以我們可以像這樣添加它：
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"]
];
現(xiàn)在已經(jīng)準(zhǔn)備好階段，讓我們開始添加可創(chuàng)建交互式Diverging Bar Chart的JavaScript代碼！
4.編寫圖表的JavaScript代碼
首先，我們需要添加一個包含所有JS代碼的函數(shù)，以確保其中的整個代碼僅在頁面加載后才能執(zhí)行。
<script>
anychart.onDocumentReady(function() {
// The place for the JS diverging bar chart code
});
</script>
通常，創(chuàng)建JS分散條形圖非常容易，我將逐步指導(dǎo)您完成每個操作。因此，準(zhǔn)備扭動，阻擋和射擊！
首先，我們創(chuàng)建一個條形圖并在封閉anychart.onDocumentReady()函數(shù)內(nèi)部輸入數(shù)據(jù)。
// 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"]
];
接下來，我們創(chuàng)建一個接受兩個參數(shù)的函數(shù)-列號和名稱。列號指示數(shù)據(jù)集中的列，名稱指示序列。在我們的案例中，我們有兩個系列-一個代表獲勝次數(shù)，一個代表失落次數(shù)。
因為我們想要一個分散的條形圖，所以讓我們以中心為坐標(biāo)，在右邊繪制獲勝的條形圖，在左邊繪制損失的條形圖。然后，我們應(yīng)該通過“ for”循環(huán)添加所有必需的值來準(zhǔn)備數(shù)據(jù)集。
如果這聽起來有點復(fù)雜，請不要擔(dān)心。這只是要準(zhǔn)備好我們的數(shù)據(jù)進(jìn)行繪制，當(dāng)您查看下面的代碼時，您可能會發(fā)現(xiàn)它們完全是合乎邏輯的。
我們還需要在函數(shù)中包含兩件事。我們使用該rangeBar函數(shù)定義了一個系列，并添加了一行以指示該系列的名稱，并在左右條之間添加了分隔線。
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);
};
現(xiàn)在，我們使用剛剛定義的函數(shù)用所需的參數(shù)創(chuàng)建兩個系列。
createSeries(0, "Losses");
createSeries(1, "Wins");
中場休息，最復(fù)雜的部分結(jié)束了！現(xiàn)在，我們有了圖表的設(shè)置。
將標(biāo)題添加到不同的條形圖中：
chart
.title()
.enabled(true)
.text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");
并啟用圖表的圖例：
chart
.legend()
.enabled(true);
為了使每年的贏利彼此相鄰，我們應(yīng)該將多系列條形圖轉(zhuǎn)換為堆積的條形圖。接下來，為了強(qiáng)調(diào)差異，讓我們在0處添加一個線標(biāo)記。最后，我們分配容器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構(gòu)建的非常基本但功能齊全的交互式發(fā)散條形圖！
盡管科比在他職業(yè)生涯的最后幾場比賽中表現(xiàn)出色，但我們可以看到湖人在他過去的幾年中苦苦掙扎，虧損多于勝利。但是總的記錄肯定比失敗多得多。
請看一下此散布條形圖的初始版本，以及在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分散條形圖
關(guān)于使用JavaScript進(jìn)行交互式數(shù)據(jù)可視化的一個扣籃，是我們必須自定義它的自由，以便我們的數(shù)據(jù)能夠講述更好的故事。我將向您展示如何對基于JS的基本發(fā)散條形圖進(jìn)行一些快速更改，以使其更具吸引力和信息量。
現(xiàn)在，我將拋出一個三指針并自定義圖表以改善其某些功能和美觀性。
1.基本樣式和軸設(shè)置
首先，讓我們更改X和Y軸的一些基本樣式和設(shè)置，以使內(nèi)容更具可讀性。
只要記住，在AnyChart的，一個范圍條形圖是垂直版本范圍柱形圖。因此，在我們的分散條形圖中，水平軸為Y軸，垂直軸為X軸。
因此，讓我們擺脫刻度線，配置軸標(biāo)題，并自定義垂直軸上的標(biāo)簽。我們還將最大值設(shè)置為80，并從水平軸上的標(biāo)簽中刪除減號：
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);
});
接下來，為了強(qiáng)調(diào)差異，最好在兩個系列之間添加一個白色描邊，并在0處添加一個線標(biāo)記。
// 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");
在我們進(jìn)行更多自定義之前，我需要做一個小題外話。我還想到了使水平軸以百分比而不是絕對值顯示每個賽季的獲利和損失。這很容易，但是結(jié)果并沒有提供任何額外的見解。
而且，絕對值確實代表了湖人隊一年中玩多少場比賽。最終，這就是為什么我決定保留絕對值的原因。但是歡迎您在CodePen [或AnyChart Playground ]上查看帶有百分比的版本。
好吧，讓我們從錯過的鏡頭繼續(xù)前進(jìn)，然后回到對焦模式。
2.工具提示自定義
接下來，我自定義了工具提示，以使其內(nèi)容更豐富，更有趣。
在這里，我還想到了將先前計算出的百分比值（請參閱上面的示例）作為我們分散的條形圖工具提示中的額外信息展示的想法。
因此，第一步是實現(xiàn)百分比值的計算：
// 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.調(diào)色板更改
好吧，最后一次自定義絕對是一把匕首-這張照片將使這張圖表看起來非常棒，并贏得比賽！它只是在更改調(diào)色板以匹配洛杉磯湖人隊球衣的顏色。很簡單：
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>
結(jié)論
在本教程中，我向您展示了使用JavaScript建立并運行分散的條形圖是多么快速和容易。我們還看到了一點點的努力如何使圖形看起來真的很酷，并使您從基礎(chǔ)數(shù)據(jù)中獲得更多收益。請讓我知道，如果你有任何問題。
如果您有動力與更多基于JS的交互式數(shù)據(jù)可視化一起工作，請繼續(xù)并嘗試使用CodePen上不同的條形圖（我在本教程中添加了鏈接），查看其他圖表選項，或嘗試其他JavaScript庫。
另外，當(dāng)我們在這里回顧籃球傳奇球隊的統(tǒng)計數(shù)據(jù)時，請記住要進(jìn)行更多的運動并創(chuàng)建更多的可視化效果！
相關(guān)產(chǎn)品推薦：
AnyGantt-構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)排程可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計劃，提高準(zhǔn)時交貨能力，提高產(chǎn)能和資源利用率
想要購買AnyChart正版授權(quán)，或了解更多產(chǎn)品信息請點擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
19次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線