AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤(pán)、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
點(diǎn)擊下載AnyChart正式版
如何使用Web的JavaScript HTML5創(chuàng)建網(wǎng)絡(luò)圖網(wǎng)絡(luò)圖是一種特殊的，非常有趣的數(shù)據(jù)可視化形式。與條形圖 或 餅圖等更傳統(tǒng)的圖表類(lèi)型不同，網(wǎng)絡(luò)圖的作用遠(yuǎn)不只是可視化數(shù)字?jǐn)?shù)據(jù)。使用這些圖表，可以將每個(gè)對(duì)象表示為一個(gè)點(diǎn)（稱(chēng)為節(jié)點(diǎn)），并將對(duì)象之間的連接表示為一條線(xiàn)（稱(chēng)為鏈接或邊）。在這里，我們不專(zhuān)注于以通常使用的相同精度來(lái)表示對(duì)象。取而代之的是，我們?cè)噲D發(fā)現(xiàn)網(wǎng)絡(luò)或網(wǎng)絡(luò)中各個(gè)部分的關(guān)系，而不必?fù)?dān)心單個(gè)節(jié)點(diǎn)。
現(xiàn)在，我將指導(dǎo)您 如何使用JavaScript（HTML5）為Web開(kāi)發(fā)交互式網(wǎng)絡(luò)圖。受 本·沙林斯（Ben Sullins）創(chuàng)建的有趣的可視化效果的啟發(fā) ，我決定采用有關(guān)過(guò)去十年最大的電視連續(xù)劇《權(quán)力的游戲》的數(shù)據(jù)。這是一個(gè)史詩(shī)般的幻想故事，圍繞著各種派系式房屋的爭(zhēng)吵。因此，在本教程中，我將通過(guò)展示誰(shuí)攻擊了誰(shuí)來(lái)形象化《權(quán)力的游戲》世界中的關(guān)系。跟著我，這將是一次很酷的冒險(xiǎn)！
制作網(wǎng)絡(luò)圖
從頭開(kāi)始構(gòu)建JS網(wǎng)絡(luò)圖
基本上，要構(gòu)建基于JS的網(wǎng)絡(luò)圖，我們需要遵循與任何JavaScript圖表相同的四個(gè)步驟：
-
創(chuàng)建一個(gè)HTML頁(yè)面。
-
添加必要的腳本。
-
加載將可視化的數(shù)據(jù)。
-
繪制圖表。
1.創(chuàng)建一個(gè)HTML頁(yè)面
建立網(wǎng)絡(luò)圖的第一步是設(shè)置HTML頁(yè)面。這涉及為圖表創(chuàng)建基本的HTML模板以及添加必要的CSS規(guī)則。
在這里，我們還為HTML頁(yè)面添加標(biāo)題，并創(chuàng)建一個(gè)div來(lái)包含圖表。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Network Graph</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// The chart code goes here.
</script>
</body>
</html>
我設(shè)置了CSS，以使容器div填充整個(gè)頁(yè)面。當(dāng)然，您可能要根據(jù)用例進(jìn)行更改。
2.添加必要的腳本
第二步是添加所有必需的腳本。我們將使用AnyChart JS Charts ，它是一個(gè)非常易于使用且功能強(qiáng)大的JavaScript圖表庫(kù)。我個(gè)人喜歡AnyChart，因?yàn)樗鼘?duì)初學(xué)者和專(zhuān)業(yè)人士都非常有用。它使您可以快速建立數(shù)據(jù)可視化的原型，并確實(shí)有助于加快整個(gè)開(kāi)發(fā)過(guò)程。
為了充分利用AnyChart庫(kù)，我們需要添加其專(zhuān)用模塊。在本教程中，我們將使用其中的三個(gè)。需要Core和Graph模塊來(lái)繪制我們的網(wǎng)絡(luò)圖，而Data Adapter模塊將幫助我們導(dǎo)入《權(quán)力的游戲》 JSON數(shù)據(jù)（稍后會(huì)介紹更多）。
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
我們將這些腳本添加到代碼的開(kāi)頭。
3.加載我們將要可視化的數(shù)據(jù)
如前所述，我們將使用的數(shù)據(jù)基于《權(quán)力的游戲》。我找到了一個(gè)很棒的數(shù)據(jù)集，《五王之戰(zhàn)》。數(shù)據(jù)最初是從源火維基和冰，致力于權(quán)力的游戲維基。然后，數(shù)據(jù)科學(xué)家Wikimedia Foundation的機(jī)器學(xué)習(xí)總監(jiān)Chris Albon對(duì)其進(jìn)行了刮擦和清理。為了這個(gè)JS網(wǎng)絡(luò)圖教程的目的，我自己進(jìn)一步處理了它。你可以找到的結(jié)果 在這里，在JSON。
問(wèn)題是，AnyChart希望您的網(wǎng)絡(luò)圖形數(shù)據(jù)采用特定格式。它想要一個(gè)具有節(jié)點(diǎn)數(shù)組和邊緣數(shù)組的JSON對(duì)象。每個(gè)節(jié)點(diǎn)都需要一個(gè)“ id”。邊緣需要一個(gè)“從”和“到”，分別是每個(gè)連接的源和目標(biāo)。
像這樣：
nodes: [{ "id": "Lannister" }]
edges: [{ "from": "Lannister", "to": "Tully" }]
然后，我們需要導(dǎo)入數(shù)據(jù)。為JavaScript數(shù)據(jù)可視化加載數(shù)據(jù)有時(shí)會(huì)很麻煩。但是使用AnyChart， 處理數(shù)據(jù) 確實(shí)非常簡(jiǎn)單。利用正確的功能，您可以輕松導(dǎo)入CSV，JSON，XML甚至Google電子表格！
在這里，我們的數(shù)據(jù)為JSON格式，因此我們需要以下功能：
anychart.data.loadJsonFile('//static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json', function (data) {
// The chart code goes here.
})
因?yàn)槲覀兿Ｍ麅H在成功加載數(shù)據(jù)之后才繪制圖表，所以我們將放置代碼以在該函數(shù)中繪制圖表。
4.繪制圖表
第四步也是最后一步是繪制圖表。在這里，我們命令根據(jù)數(shù)據(jù)創(chuàng)建一個(gè)圖表，設(shè)置圖表標(biāo)題，然后使用這些非常簡(jiǎn)單的函數(shù)將圖形可視化：
// create a chart from the loaded data
var chart = anychart.graph(data);
// set the title
chart.title("Network Graph showing the battles in Game of Thrones");
// draw the chart
chart.container("container").draw();
結(jié)果如下：
請(qǐng)參見(jiàn)此網(wǎng)絡(luò)圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。
也許不如我們基于D3.js的靈感在美學(xué)上給人留下深刻的印象，但我們稍后會(huì)談到。花一些時(shí)間將鼠標(biāo)懸停在節(jié)點(diǎn)上，或者將它們拖動(dòng)一點(diǎn)。多么驚人？通過(guò)這四個(gè)簡(jiǎn)單步驟和幾行JavaScript代碼，我們創(chuàng)建了這個(gè)功能強(qiáng)大且交互式的網(wǎng)絡(luò)圖。
完整的代碼如下，檢查出來(lái)：
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></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 () {
anychart.data.loadJsonFile("http://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json", function (data) {
// create a chart from the loaded data
var chart = anychart.graph(data);
// set the title
chart.title("Network Graph showing the battles in Game of Thrones");
// draw the chart
chart.container("container").draw();
});
});
</script>
</body>
</html>
自定義網(wǎng)絡(luò)圖外觀
正如我們目前的可視化效果一樣，我們可以做得更好。好了很多。所有不錯(cuò)的JS圖表庫(kù)都允許您自定義使用其API構(gòu)建的圖表。作為數(shù)據(jù)可視化開(kāi)發(fā)人員，利用這些自定義更好地講述您的數(shù)據(jù)故事是一項(xiàng)關(guān)鍵技能。這些定制中的一些是美觀的，例如更改元素的大小或顏色，而某些功能是在更改工具提示時(shí)。
下面，我將展示一些可用于網(wǎng)絡(luò)圖的自定義技術(shù)。
更改迭代步驟
網(wǎng)絡(luò)圖是使用一種算法繪制的，該算法反復(fù)嘗試改善其布局。對(duì)于每次迭代，算法都會(huì)根據(jù)誤差度量進(jìn)一步優(yōu)化步驟。這表明迭代次數(shù)越多越好。但是，有時(shí)算法對(duì)優(yōu)化布局的想法與您（以及您的用戶(hù)）對(duì)優(yōu)化布局的想法可能會(huì)大不相同。通過(guò)更改迭代次數(shù)，我們可以獲得適合我們需求的不同布局。
在下面添加代碼，您將看到如果僅使用10次迭代（默認(rèn)值為500），將會(huì)發(fā)生什么情況。
// set the iteration step
chart.layout().iterationCount(10);
好吧，這只是一個(gè)快速演示。讓我們跳過(guò)此更改，看看如何對(duì)我們的JS網(wǎng)絡(luò)圖可視化做一些有趣的事情。
定制節(jié)點(diǎn)（基本）：
我們可以自定義每個(gè)節(jié)點(diǎn)的大小，填充和筆觸，以及為每個(gè)狀態(tài)設(shè)置不同的規(guī)則。狀態(tài)表示默認(rèn)節(jié)點(diǎn)，懸停的節(jié)點(diǎn)或選定的節(jié)點(diǎn)。可以使用與設(shè)置CSS顏色相同的方式來(lái)設(shè)置JavaScript網(wǎng)絡(luò)圖中的顏色，這里我們將使用十六進(jìn)制代碼。
// set the size of nodes
nodes.normal().height(30);
nodes.hovered().height(45);
nodes.selected().height(45);
// set the fill of nodes
nodes.normal().fill("#ffa000");
nodes.hovered().fill("white");
nodes.selected().fill("#ffa000");
// set the stroke of nodes
nodes.normal().stroke(null);
nodes.hovered().stroke("#333333", 3);
nodes.selected().stroke("#333333", 3);
請(qǐng)參見(jiàn)此網(wǎng)絡(luò)圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。
自定義節(jié)點(diǎn)（高級(jí)）：
就個(gè)人而言，對(duì)于網(wǎng)絡(luò)圖，我最喜歡的美學(xué)更改是將節(jié)點(diǎn)圖標(biāo)替換為圖像。在這里，我們可以用圖像替換韋斯特羅斯（我們的節(jié)點(diǎn)）的大房子。通過(guò)將圖像的文件路徑添加到我們JSON中每個(gè)節(jié)點(diǎn)的對(duì)象上，可以輕松完成此操作。例如：
{id: "Example",
fill: {
src: "example_url"
}
},
我已經(jīng)進(jìn)行了更改，可以在這里找到更新的文件。通過(guò)將此JSON與包含的圖像一起使用，我們得到以下圖形：
請(qǐng)參見(jiàn)此網(wǎng)絡(luò)圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。
節(jié)點(diǎn)標(biāo)簽
并非所有人都知道每所房子的標(biāo)語(yǔ)，不得不將鼠標(biāo)懸停在每個(gè)節(jié)點(diǎn)上以查看它屬于哪個(gè)節(jié)點(diǎn)可能會(huì)非常痛苦。為了解決這個(gè)問(wèn)題，我們可以標(biāo)記每個(gè)節(jié)點(diǎn)。使用以下代碼即可輕松完成此操作：
// enable the labels of nodes
chart.nodes().labels().enabled(true);
// configure the labels of nodes
chart.nodes().labels().format("{%id}");
chart.nodes().labels().fontSize(12);
chart.nodes().labels().fontWeight(600);
結(jié)果是：
請(qǐng)參見(jiàn)此網(wǎng)絡(luò)圖示例，以及在AnyChart Playground或CodePen上的完整HTML / CSS / JS代碼。
為了方便起見(jiàn)，這是此交互式Java網(wǎng)絡(luò)圖（此教程的最終版本）的完整代碼，該可視化圖像將有關(guān)權(quán)力游戲之戰(zhàn)的數(shù)據(jù)可視化：
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></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 () {
anychart.data.loadJsonFile("http://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data_images.json", function (data) {
// create a chart from the loaded data
var chart = anychart.graph(data);
// set the title
chart.title("Network Graph showing the battles in Game of Thrones");
// access nodes
var nodes = chart.nodes();
// set the size of nodes
nodes.normal().height(30);
nodes.hovered().height(45);
nodes.selected().height(45);
// set the stroke of nodes
nodes.normal().stroke(null);
nodes.hovered().stroke("#333333", 3);
nodes.selected().stroke("#333333", 3);
// enable the labels of nodes
chart.nodes().labels().enabled(true);
// configure the labels of nodes
chart.nodes().labels().format("{%id}");
chart.nodes().labels().fontSize(12);
chart.nodes().labels().fontWeight(600);
// draw the chart
chart.container("container").draw();
});
});
</script>
</body>
</html>
結(jié)論
就像這樣，我們有了很棒的可視化工具，可以解開(kāi)該網(wǎng)絡(luò)中的復(fù)雜關(guān)系。在本教程中，我展示了啟動(dòng)和運(yùn)行JS網(wǎng)絡(luò)圖表的過(guò)程是多么快速和容易，以及通過(guò)多一點(diǎn)的努力，我們就能通過(guò)一些選擇調(diào)整真正使圖表變得生動(dòng)起來(lái)。
如果本教程激發(fā)了您對(duì)基于演出的圖表的興趣，請(qǐng)查看此精彩絕倫的32權(quán)力游戲數(shù)據(jù)可視化列表。
想要購(gòu)買(mǎi)Anychart正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營(yíng) 
22次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線(xiàn)咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線(xiàn)