AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。
點擊下載AnyChart正式版
您是否想知道如何使用JavaScript輕松地為基于HTML5的應(yīng)用程序和網(wǎng)頁創(chuàng)建交互式Marimekko圖表？如果是，那么您將是學(xué)習(xí)此方法的最佳途徑。
Marimekko圖表也稱為Mekko圖表和市場地圖，其Y軸顯示的數(shù)值從0％到100％不等。最令人興奮的部分在于它們的X軸，它表示類別中值的總和。每個類別在X軸上的寬度代表整個類別對所有數(shù)據(jù)總量的貢獻(xiàn)。簡而言之，這是一種可視化分類數(shù)據(jù)的堆疊圖表。盡管如此，通過確定每個段的寬度和高度，Y軸和X軸都在百分比刻度上變化。
您是智能手機(jī)發(fā)燒友并且有興趣按季度和供應(yīng)商查看2019年全球智能手機(jī)出貨量嗎？然后，特別要遵循本教程，因為我們將使用簡單的JS圖表編碼技術(shù)在優(yōu)雅的Marimekko圖表中可視化此市場數(shù)據(jù)。
如何創(chuàng)建基本的JS Marimekko圖表
在JavaScript圖表中可視化數(shù)據(jù)的一般順序包括以下簡單的四個步驟，并且構(gòu)建JS Marimekko圖表也不例外：
-
創(chuàng)建帶有容器的HTML頁面以顯示圖表。
-
連接您需要的所有腳本。
-
加載需要在圖表中可視化的數(shù)據(jù)。
-
最后，編寫JS圖表代碼。
現(xiàn)在，讓我們深入研究每個步驟以繪制漂亮的Marimekko圖表。
步驟1：建立HTML網(wǎng)頁
第一步是建立一個基本的HTML頁面來放置Marimekko圖表。
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
// Marimekko chart code goes here
</body>
</html>
上面開發(fā)的HTML頁面由兩個主要部分組成，標(biāo)題（在<head></head>標(biāo)簽之間）和頁面主體（在<body></body>標(biāo)簽之間）。在頁眉部分，我們設(shè)置了HTML頁面標(biāo)題（在<title></title>標(biāo)簽之間）和CSS規(guī)則（在<style></style>標(biāo)簽之間）來管理container元素的外觀。
div正文部分中ID為的元素container是將用于放置Marimekko圖表的塊。由于我希望圖形顯示在整個HTML頁面上，因此我將容器元素的width和height字段設(shè)置為100％。因此，該圖表將顯示在整個頁面上。
步驟2：連接所有必需的腳本
接下來，我們應(yīng)該連接構(gòu)建Marimekko圖表所需的所有JavaScript腳本。
通常，對于所有JavaScript圖表庫來說，構(gòu)建Marimekko或基本上任何其他圖表的這些簡單步驟都是相同的。在本教程中，我將以AnyChart為例。它是用于交互式數(shù)據(jù)可視化的流行的靈活JS庫，它具有出色的文檔和API參考以及許多演示，因此即使對于初學(xué)者來說，也很容易上手。
AnyChart具有模塊化系統(tǒng)，這意味著您不需要整個庫，而只能連接實際需要的那些圖表類型和功能。這樣，可以大大減少網(wǎng)頁上運行的JavaScript代碼的大小。它總是對性能有好處。因此，在我們的案例中，應(yīng)使用“基本”和“ mekko”模塊來表示Marimekko圖表中的數(shù)據(jù)。它們將在標(biāo)記的<head></head>部分中 進(jìn)行引用<script></script>。
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
構(gòu)建Marimekko圖表所需的JavaScript代碼應(yīng)寫在<body></body>;HTML頁面的標(biāo)簽之間。
以下是帶有新更改的代碼外觀。是不是很酷？伙計們，繼續(xù)讀書。我們正在接近最令人興奮的部分。
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// Marimekko chart code goes here
</script>
</body>
</html>
步驟3：加載您要可視化的數(shù)據(jù)
如本教程開頭所述，Marimekko屬于2D堆疊圖系列，但它通過改變列寬說明了數(shù)據(jù)的附加維。此圖表類型廣泛用于解釋銷售數(shù)據(jù)和執(zhí)行市場分析，但是請確保您已根據(jù)需要正確選擇數(shù)據(jù)。
您是否對2019年喜愛的智能手機(jī)品牌的全球出貨量感到好奇？等待，讓我們更深入地研究并季度可視化發(fā)貨，以便使數(shù)據(jù)適合于Marimekko圖表。
在當(dāng)前情況下，Marimekko圖表將用于說明2019年季度智能手機(jī)出貨量排名前六的品牌（百萬）。以下是我們將要使用的數(shù)據(jù)集。（來源：IDC。）
Mekko圖形的奇妙之處在于，兩個軸都以百分比表示數(shù)據(jù)，但是您只需要輸入實際數(shù)據(jù)，圖表便會自動計算所有數(shù)據(jù)。
我們將移動貨件數(shù)據(jù)轉(zhuǎn)換為特定的JavaScript對象，如下所示。它以數(shù)組數(shù)組的形式保存數(shù)據(jù)標(biāo)題設(shè)置，標(biāo)題和數(shù)據(jù)本身。
X軸包含每個智能手機(jī)品牌的總出貨量，而Y軸用于按季度讀取每個智能手機(jī)品牌的出貨量百分比。
以下是我們將要使用的數(shù)據(jù)集。header以下JavaScript對象的設(shè)置用于設(shè)置每個智能手機(jī)生產(chǎn)商品牌的季度詳細(xì)信息。因此，我們將看到季度關(guān)系。
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
步驟4：編寫JS Marimekko圖表代碼
完成所有準(zhǔn)備工作后，我們可以進(jìn)入最后一節(jié)以顯示最期待的Marimekko圖表。負(fù)責(zé)顯示Marimekko圖表的整個JavaScript圖表代碼必須插入標(biāo)記anychart.onDocumentReady()內(nèi)編寫的函數(shù)內(nèi)<script>。顧名思義，該函數(shù)將等待頁面準(zhǔn)備顯示數(shù)據(jù)。
<script>
anychart.onDocumentReady(function() {
// The entire JavaScript code of the Marimekko chart will be here
});
</script>
然后，使用步驟3中的代碼來生成需要饋送到Mekko圖表的數(shù)據(jù)。
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
下一步是指定JS圖表類型。在這種情況下，我們應(yīng)該使用mekko圖表并將其與要在Marimekko圖表中可視化的數(shù)據(jù)一起輸入。
// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);
讓我們啟用圖表的圖例，如下所示。
// enable the chart legend
chart.legend(true);
最后，命令在容器中繪制Marimekko圖表：
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
這是我們等待的結(jié)果。（請參閱AnyChart Playground上的基本Marimekko圖表。）
上面基本的交互式HTML5 Marimekko圖表的完整代碼如下。
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentReady(function () {
// create data
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);
// enable the chart legend
chart.legend(true);
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
});
</script>
</body>
</html>
自定義JS Marimekko圖表
好吧，這部分是為蛋糕錦上添花。您在AnyChart中擁有大量的文檔資源，可以在其中獲得深入的知識，以改進(jìn)，更改和自定義生成的圖表。要獲取靈感，請查看演示庫。
讓我們嘗試修改我們的JavaScript Marimekko圖表，使其外觀更加優(yōu)雅。
使用調(diào)色板更改圖表顏色
可以使用“調(diào)色板”選項自定義Marimekko圖表的顏色。請參閱本手冊 以找到有關(guān)AnyChart調(diào)色板的更多詳細(xì)信息。在下面的例子中，我們應(yīng)用了Wines面板。還有更多的預(yù)建調(diào)色板正在等待您。
// apply a palette for coloring
chart.palette(anychart.palettes.wines);
圖表不是很方便嗎？（在AnyChart Playground上查看。）
格式化圖表軸
以下代碼附加內(nèi)容用于通過添加標(biāo)題和更改軸的方向來格式化軸。
這是包含軸標(biāo)題的代碼：
// set the x-axis title
chart.xAxis().title('Smartphone Shipments by Brands');
// set the y-axis title
chart.yAxis().title('Smartphone Shipments by Quarters %');
Y軸的方向可以是左側(cè)或右側(cè)。保留默認(rèn)值。X軸的方向可以設(shè)置為頂部或底部，默認(rèn)情況下將其設(shè)置為底部。根據(jù)您的興趣配置它們。在兩個軸的方向上進(jìn)行以下更改。出于演示目的，將X軸和Y軸的方向設(shè)置為頂部和右側(cè)。
// set the x-axis orientation
chart.xAxis().orientation("top");
// set the y-axis orientation
chart.yAxis().orientation("right");
該圖表似乎更易于使用軸標(biāo)題。（在AnyChart Playground上查看。）
從下一個示例開始，Marimekko圖表軸的方向?qū)⒒謴?fù)為默認(rèn)外觀。
設(shè)置圖表格式的工具提示
工具提示通常是隱藏的，但是當(dāng)懸停在圖表的點上時，它們會變得可見。這可以用來顯示其他有用的信息。
第一步，讓我們生成懸停時需要顯示的信息。根據(jù)以下代碼段，我們顯示seriesName（季度）和value（（相應(yīng)季度的發(fā)貨金額，以百萬美元為單位）。
// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');
“聯(lián)合”顯示模式有助于一次顯示所有季度的數(shù)據(jù)。
// set the tooltip display mode
chart.tooltip().displayMode("union");
以下只是對Marimekko圖表工具提示標(biāo)題的視覺外觀進(jìn)行的另一種簡單修改。我們可以如下所示更改字體大小，背景外觀和字體粗細(xì)。
// customize the tooltip title
var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(700);
title.fontSize(18);
我們基于JS的Marimekko圖表似乎變得越來越好，更具可讀性。（在AnyChart Playground上查看。）
格式化圖表標(biāo)簽設(shè)置
標(biāo)簽是可以與圖表上的點一起顯示的文本框。標(biāo)簽通常指示每個點包含的信息。讓我們在此Marimekko圖表中配置標(biāo)簽，以添加每個季度的裝運價值以百萬美元顯示。
// set the chart labels settings
chart.labels().format('${%Value}M');
最后，這是我們在如上所述進(jìn)行相關(guān)自定義后的交互式Marimekko圖表的外觀。（在AnyChart Playground上查看。）
新定制的高級Marimekko圖表比初始可視化看起來更具信息量和吸引力。您可以發(fā)揮創(chuàng)意，以向圖表顯示更多詳細(xì)信息。
根據(jù)最終確定的Marimekko圖表，三星是2019年全球領(lǐng)先的智能手機(jī)供應(yīng)商。但是請注意，三星！華為似乎很快就會挑戰(zhàn)您。您是否注意到蘋果在第四季度的表現(xiàn)異常出色，擊敗了所有競爭對手？這項杰出成就背后的成功故事是iPhone 11系列的發(fā)布，引起了全球眾多人的關(guān)注。
伙計們，請使用您的數(shù)據(jù)，因為他們正在等待為您揭示令人興奮的信息。
以下是本教程中最終Marimekko圖表的完整HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentReady(function () {
// create data
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);
// enable the chart legend
chart.legend(true);
// apply a palette for coloring
chart.palette(anychart.palettes.wines);
// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');
// set the tooltip display mode
chart.tooltip().displayMode("union");
// customize the tooltip title
var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(700);
title.fontSize(18);
// set the chart labels settings
chart.labels().format('${%Value}M');
// set the x-axis title
chart.xAxis().title('Smartphone Shipments by Brands');
// set the y-axis title
chart.yAxis().title('Smartphone Shipments by Quarters %');
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
});
</script>
</body>
</html>
結(jié)論
使用JavaScript構(gòu)建Marimekko圖表是否比指南開始時想象的要容易呢？某些諸如此類的圖表庫的API易于訪問，內(nèi)容豐富，并且可以使您的數(shù)據(jù)可視化開發(fā)工作變得非常容易?？捎玫膹?qiá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ī)買球 
27次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線