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