AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。
點擊下載AnyChart最新版
構建交互式 JS 馬賽克圖的分步指南。通過可視化 2020 年按品牌劃分的季度 PC 出貨量數據來說明。
數據可視化是當今場景中的一種有價值的工具，數據無處不在，并且有各種機會利用這些數據來尋找洞察力。可視化圖表對于交流想法、識別模式和充分利用可用數據是必不可少的。
那么，您想快速輕松地學習如何創建一個非常酷的圖表來有趣地展示數據嗎？
甲鑲嵌圖表是一個多系列的圖表，有效地表示超過2的參數數據，并且所謂的，因為每一個數據點具有鮮明的縮進，使得視覺上相似于一塊鑲嵌技術。這個圖表不僅好看，而且在表示多個變量和識別這些不同變量之間的關系方面也非常有幫助。
2020 年并不全是糟糕的一年，至少對于個人電腦市場而言是這樣。個人電腦的銷量在 2020 年每個季度都在增長，越來越多的人在家工作和學習。我根據全球出貨量探索了每個品牌在每個季度的表現。
下面是讓你興奮的最終圖表！
跟隨這個面向前端 Web 開發人員和數據可視化愛好者的快速教程，掌握使用 JavaScript創建馬賽克圖表的竅門。
通過 4 個簡單步驟構建 JS 馬賽克圖
馬賽克圖表可能看起來令人興奮，但很難創建。但是，使用JavaScript 圖表庫創建此圖表非常簡單和容易，因為可以消除很多編碼負擔，并允許您以最少的技術細節快速制作圖表。
在本教程中，我使用AnyChart JS 庫。我選擇 AnyChart 是因為它靈活且易于開始。由于大量的文檔以及許多有用的示例，它特別適合初學者。
在可視化數據時，具有一些 HTML 和 JavaScript 等技術背景是一個優勢。盡管如此，使用 JS 庫創建交互式圖表并不復雜，并且使用幾乎所有支持這種圖表類型的 JavaScript 庫創建馬賽克圖表的步驟往往或多或少相同。
創建 JS 馬賽克圖的 4 個基本步驟是：
-
為圖表創建一個 HTML 頁面。
-
添加必要的 JavaScript 文件。
-
連接數據。
-
編寫繪制圖表所需的JS代碼。
1. 創建一個基本的 HTML 頁面
首先要做的是創建一個基本的 HTML 頁面來保存圖表。接下來，創建一個 HTML 塊元素，為了<div>稍后在代碼中標識它，我給它一個 id 屬性，如“container”。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mosaic 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>
我為塊提供 100% 的寬度和高度，以便圖表填充整個頁面，但可以根據您的喜好指定。
2. 引用必要的 JavaScript 文件
下一步是添加圖表庫腳本以創建馬賽克圖表。我包含了 AnyChart 的CDN 中的相應文件，因為這是我正在使用的庫。當然，這些腳本也可以這樣下載和引用。
對于此圖表，我需要核心腳本以及馬賽克圖表的特定模塊。在這里，馬賽克圖表模塊包含 3 種不同類型的 Marimekko 圖表，馬賽克就是其中之一。如果您想了解有關這些圖表及其具體特征的更多信息，請查看有關 Marimekko 圖表的 AnyChart文檔。
我將這兩個腳本添加到<head>我的 HTML 頁面的部分。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mosaic Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js">
</script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.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>
// All the JS code for the mosaic chart will come here.
</script>
</body>
</html>
3.設置數據
我整理了Gartner給出的 2020 年每個季度不同 PC 品牌的銷售數據。為了方便馬賽克圖的創建，我把數據處理成適合它的格式，由于數據有限，我直接在代碼中添加了。
在這里，我在 X 軸上繪制季度，將品牌繪制為單獨的圖塊，因此我在標題數據中添加了品牌，并在行中添加了季度數字。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mosaic Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js">
</script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.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>
var data = {
header: [
'#',
'LENOVO',
'HP',
'DELL',
'APPLE',
'ACER',
'ASUS',
'OTHERS'
],
rows: [
['Q1', 12613,11114,10158,3555,2900,2603,8693],
['Q2', 16197,16165,10648,4368,4007,3593,9829],
['Q3', 18310,15447,10827,5513,5085,4747,11448],
['Q4', 21491,15683,13199,6893,4741,4570,12813]
]
};
</script>
</body>
</html>
現在我們已經完成了所有的準備工作，讓我們繼續繪制別致的交互式 JS 馬賽克圖表的最后一步！
4. 為圖表編寫 JavaScript 代碼
對于沒有太多編碼經驗的人來說，編寫代碼可能聽起來令人生畏，但相信我，實際上需要編寫 5 行代碼才能想象出一個漂亮的馬賽克圖表。
首先，我添加了一個包含所有代碼的函數，以確保其中的整個代碼僅在頁面準備好后才會執行。然后我將數據放入這個函數中。
接下來，我使用內置函數創建馬賽克圖表并設置數據。
最后，我添加對要繪制圖表的容器的引用，設置圖表的標題，并開始繪制。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mosaic Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js">
</script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.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 () {
var data = {
header: [
'#',
'LENOVO',
'HP',
'DELL',
'APPLE',
'ACER',
'ASUS',
'OTHERS'
],
rows: [
['Q1', 12613,11114,10158,3555,2900,2603,8693],
['Q2', 16197,16165,10648,4368,4007,3593,9829],
['Q3', 18310,15447,10827,5513,5085,4747,11448],
['Q4', 21491,15683,13199,6893,4741,4570,12813]
]
};
// create a mosaic chart
var chart = anychart.mosaic();
// set chart data
chart.data(data);
// set container id for the chart
chart.container('container');
// set the chart title
chart.title("Quarterly Brand-wise Personal Computer Shipments in 2020 (Thousands of Units)");
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
您可以通過每個季度的寬度增加立即看到每個季度的出貨量如何增加。在品牌方面，聯想是明顯的市場領導者，其銷售額逐季增長。此外，可以清楚地看到，聯想、惠普和戴爾占據了超過 50% 的市場份額。
在CodePen [或AnyChart Playground ]上查看帶有完整 JS/CSS/HTML 代碼的馬賽克圖表的初始版本。
自定義馬賽克圖表
大多數不錯的 JS 圖表庫都允許您使用它們的 API 自定義圖表。這些自定義可以使您的數據可視化以個性化的美感和改進的您想要傳達的消息的表示方式脫穎而出。
現在已經創建了基本的馬賽克圖表，讓我向您展示如何通過一些簡單的自定義來增強圖表在表示數據和調整其外觀方面的能力。
1.減少單個瓷磚之間的空間
為了改善馬賽克的外觀，我只用一行代碼減少了每個點之間的空間。
chart.pointsPadding(3);
2. 改進數據標簽展示
數據中的值是以千為單位的數字形式。為了使其更具可讀性和易于理解，我更改了數字的格式以顯示以百萬為單位的數字。我還更新了圖表的標題以反映這一修改。
// set the chart labels settings
chart.labels()
.format(function(e){
var value = ((this.value)/1000).toFixed(2);
return value + " M";
});
...
// set the chart title
chart.title("Quarterly Brand-wise Personal Computer Shipments in 2020");
3.更改顏色主題并進行其他相關修改
為了使馬賽克圖表更加個性化，我決定使用不同的調色板。AnyChart 提供了一些很棒的內置主題，其中包括預定義的設置，例如圖表數據點的顏色以及背景以及不同的字體。您也可以創建自定義主題，但對于此圖表，我選擇了一個開箱即用的主題，感覺就像是老一代的 PC 屏幕。
我在該<head>部分添加主題腳本，然后添加一行代碼來設置馬賽克圖表的主題。
根據我的喜好，固有字體大小略小，因此我在樣式中指定了字體大小。另外，我希望圖表的標題更大，所以我也添加了一些代碼來修改它。
<head>
<script src="http://cdn.anychart.com/releases/8.9.0/themes/dark_blue.min.js">
</script>
...
<style type="text/css">
#container text {
font-size: 13px;
}
</style>
</head>
...
<body>
<script>
// set the chart theme
anychart.theme('darkBlue');
</script>
</body>
另外，我希望圖表的標題更大，所以我也添加了一些代碼來修改它。
// set the chart title
chart
.title()
.enabled(true)
.useHtml(true)
.text("<span style='font-size:16px';>Quarterly Brand-wise Personal Computer Shipments in 2020</span>");
馬賽克圖看起來是不是非常個性化和引人入勝？
4. 增強工具提示
最后要做的是使工具提示信息更豐富且格式更佳。由于這是一個具有非常清晰可識別的單個數據點的馬賽克圖表，我希望工具提示顯示該特定季度的所有數據值。這可以通過指定工具提示的顯示模式來完成。
最后，我只是調整了工具提示的外觀。
// set union tooltip
chart.tooltip().displayMode('union');
// enable HTML in tooltips and format
chart
.tooltip()
.useHtml(true)
.format("<h5 style='font-size:14px; margin: 0.5rem 0;'>{%name}</h5>{%SeriesName}: {%value}{scale:(1000)(1000)|( M)}");
在此處或CodePen [或AnyChart Playground ]上查看馬賽克圖表的最終代碼。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mosaic Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js">
</script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js">
</script>
<script src="http://cdn.anychart.com/releases/8.9.0/themes/dark_blue.min.js">
</script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container text {
font-size: 13px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
var data = {
header: [
'#',
'LENOVO',
'HP',
'DELL',
'APPLE',
'ACER',
'ASUS',
'OTHERS'
],
rows: [
['Q1', 12613,11114,10158,3555,2900,2603,8693],
['Q2', 16197,16165,10648,4368,4007,3593,9829],
['Q3', 18310,15447,10827,5513,5085,4747,11448],
['Q4', 21491,15683,13199,6893,4741,4570,12813]
]
};
// set the chart theme
anychart.theme('darkBlue');
// create a mosaic chart
var chart = anychart.mosaic();
// set points padding
chart.pointsPadding(3);
// set chart data
chart.data(data);
// set the chart labels settings
chart.labels()
.format(function(e){
var value = ((this.value)/1000).toFixed(2);
return value + " M";
});
// set union tooltip
chart.tooltip().displayMode('union');
// enable HTML in tooltips and format
chart
.tooltip()
.useHtml(true)
.format("<h5 style='font-size:14px; margin: 0.5rem 0;'>{%name}</h5>{%SeriesName}: {%value}{scale:(1000)(1000)|( M)}");
// set container id for the chart
chart.container('container');
// set the chart title
chart
.title()
.enabled(true)
.useHtml(true)
.text("<span style='font-size:16px';>Quarterly Brand-wise Personal Computer Shipments in 2020</span>");
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
結論
如您所見，在圖表庫的幫助下，構建一個具有創造性和交互性的 JS Mosaic Chart 并不困難。當然，這只是觸及皮毛，所以繼續嘗試不同的圖表和數據集。還有許多其他 JS 圖表庫可供探索，或者如果您愿意，可以查看AnyChart 中一些很棒的其他圖表類型。
相關產品推薦：
AnyGantt——構建復雜且內容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線