AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
您是否想知道如何使用JavaScript輕松地為基于HTML5的應用程序和網頁創建交互式Marimekko圖表？如果是，那么您將是學習此方法的最佳途徑。
Marimekko圖表也稱為Mekko圖表和市場地圖，其Y軸顯示的數值從0％到100％不等。最令人興奮的部分在于它們的X軸，它表示類別中值的總和。每個類別在X軸上的寬度代表整個類別對所有數據總量的貢獻。簡而言之，這是一種可視化分類數據的堆疊圖表。盡管如此，通過確定每個段的寬度和高度，Y軸和X軸都在百分比刻度上變化。
您是智能手機發燒友并且有興趣按季度和供應商查看2019年全球智能手機出貨量嗎？然后，特別要遵循本教程，因為我們將使用簡單的JS圖表編碼技術在優雅的Marimekko圖表中可視化此市場數據。
如何創建基本的JS Marimekko圖表
在JavaScript圖表中可視化數據的一般順序包括以下簡單的四個步驟，并且構建JS Marimekko圖表也不例外：
-
創建帶有容器的HTML頁面以顯示圖表。
-
連接您需要的所有腳本。
-
加載需要在圖表中可視化的數據。
-
最后，編寫JS圖表代碼。
現在，讓我們深入研究每個步驟以繪制漂亮的Marimekko圖表。
步驟1：建立HTML網頁
第一步是建立一個基本的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>
上面開發的HTML頁面由兩個主要部分組成，標題（在<head></head>標簽之間）和頁面主體（在<body><;/body>標簽之間）。在頁眉部分，我們設置了HTML頁面標題（在<title></title>標簽之間）和CSS規則（在<style></style>標簽之間）來管理container元素的外觀。
div正文部分中ID為的元素container是將用于放置Marimekko圖表的塊。由于我希望圖形顯示在整個HTML頁面上，因此我將容器元素的width和height字段設置為100％。因此，該圖表將顯示在整個頁面上。
步驟2：連接所有必需的腳本
接下來，我們應該連接構建Marimekko圖表所需的所有JavaScript腳本。
通常，對于所有JavaScript圖表庫來說，構建Marimekko或基本上任何其他圖表的這些簡單步驟都是相同的。在本教程中，我將以AnyChart為例。它是用于交互式數據可視化的流行的靈活JS庫，它具有出色的文檔和API參考以及許多演示，因此即使對于初學者來說，也很容易上手。
AnyChart具有模塊化系統，這意味著您不需要整個庫，而只能連接實際需要的那些圖表類型和功能。這樣，可以大大減少網頁上運行的JavaScript代碼的大小。它總是對性能有好處。因此，在我們的案例中，應使用“基本”和“ mekko”模塊來表示Marimekko圖表中的數據。它們將在標記的<head></head>部分中 進行引用<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>
構建Marimekko圖表所需的JavaScript代碼應寫在<body></body>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"></div>
<script>
// Marimekko chart code goes here
</script>
</body>
</html>
步驟3：加載您要可視化的數據
如本教程開頭所述，Marimekko屬于2D堆疊圖系列，但它通過改變列寬說明了數據的附加維。此圖表類型廣泛用于解釋銷售數據和執行市場分析，但是請確保您已根據需要正確選擇數據。
您是否對2019年喜愛的智能手機品牌的全球出貨量感到好奇？等待，讓我們更深入地研究并季度可視化發貨，以便使數據適合于Marimekko圖表。
在當前情況下，Marimekko圖表將用于說明2019年季度智能手機出貨量排名前六的品牌（百萬）。以下是我們將要使用的數據集。（來源：IDC。）
Mekko圖形的奇妙之處在于，兩個軸都以百分比表示數據，但是您只需要輸入實際數據，圖表便會自動計算所有數據。
我們將移動貨件數據轉換為特定的JavaScript對象，如下所示。它以數組數組的形式保存數據標題設置，標題和數據本身。
X軸包含每個智能手機品牌的總出貨量，而Y軸用于按季度讀取每個智能手機品牌的出貨量百分比。
以下是我們將要使用的數據集。header以下JavaScript對象的設置用于設置每個智能手機生產商品牌的季度詳細信息。因此，我們將看到季度關系。
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圖表代碼
完成所有準備工作后，我們可以進入最后一節以顯示最期待的Marimekko圖表。負責顯示Marimekko圖表的整個JavaScript圖表代碼必須插入標記anychart.onDocumentReady()內編寫的函數內<script>。顧名思義，該函數將等待頁面準備顯示數據。
<script>
anychart.onDocumentReady(function() {
// The entire JavaScript code of the Marimekko chart will be here
});
</script>
然后，使用步驟3中的代碼來生成需要饋送到Mekko圖表的數據。
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圖表類型。在這種情況下，我們應該使用mekko圖表并將其與要在Marimekko圖表中可視化的數據一起輸入。
// 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();
這是我們等待的結果。（請參閱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中擁有大量的文檔資源，可以在其中獲得深入的知識，以改進，更改和自定義生成的圖表。要獲取靈感，請查看演示庫。
讓我們嘗試修改我們的JavaScript Marimekko圖表，使其外觀更加優雅。
使用調色板更改圖表顏色
可以使用“調色板”選項自定義Marimekko圖表的顏色。請參閱本手冊 以找到有關AnyChart調色板的更多詳細信息。在下面的例子中，我們應用了Wines面板。還有更多的預建調色板正在等待您。
// apply a palette for coloring
chart.palette(anychart.palettes.wines);
圖表不是很方便嗎？（在AnyChart Playground上查看。）
格式化圖表軸
以下代碼附加內容用于通過添加標題和更改軸的方向來格式化軸。
這是包含軸標題的代碼：
// 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軸的方向可以是左側或右側。保留默認值。X軸的方向可以設置為頂部或底部，默認情況下將其設置為底部。根據您的興趣配置它們。在兩個軸的方向上進行以下更改。出于演示目的，將X軸和Y軸的方向設置為頂部和右側。
// set the x-axis orientation
chart.xAxis().orientation("top");
// set the y-axis orientation
chart.yAxis().orientation("right");
該圖表似乎更易于使用軸標題。（在AnyChart Playground上查看。）
從下一個示例開始，Marimekko圖表軸的方向將恢復為默認外觀。
設置圖表格式的工具提示
工具提示通常是隱藏的，但是當懸停在圖表的點上時，它們會變得可見。這可以用來顯示其他有用的信息。
第一步，讓我們生成懸停時需要顯示的信息。根據以下代碼段，我們顯示seriesName（季度）和value（（相應季度的發貨金額，以百萬美元為單位）。
// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');
“聯合”顯示模式有助于一次顯示所有季度的數據。
// set the tooltip display mode
chart.tooltip().displayMode("union");
以下只是對Marimekko圖表工具提示標題的視覺外觀進行的另一種簡單修改。我們可以如下所示更改字體大小，背景外觀和字體粗細。
// 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上查看。）
格式化圖表標簽設置
標簽是可以與圖表上的點一起顯示的文本框。標簽通常指示每個點包含的信息。讓我們在此Marimekko圖表中配置標簽，以添加每個季度的裝運價值以百萬美元顯示。
// set the chart labels settings
chart.labels().format('${%Value}M');
最后，這是我們在如上所述進行相關自定義后的交互式Marimekko圖表的外觀。（在AnyChart Playground上查看。）
新定制的高級Marimekko圖表比初始可視化看起來更具信息量和吸引力。您可以發揮創意，以向圖表顯示更多詳細信息。
根據最終確定的Marimekko圖表，三星是2019年全球領先的智能手機供應商。但是請注意，三星！華為似乎很快就會挑戰您。您是否注意到蘋果在第四季度的表現異常出色，擊敗了所有競爭對手？這項杰出成就背后的成功故事是iPhone 11系列的發布，引起了全球眾多人的關注。
伙計們，請使用您的數據，因為他們正在等待為您揭示令人興奮的信息。
以下是本教程中最終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>
結論
使用JavaScript構建Marimekko圖表是否比指南開始時想象的要容易呢？某些諸如此類的圖表庫的API易于訪問，內容豐富，并且可以使您的數據可視化開發工作變得非常容易。可用的強大文檔將幫助您快速解決編碼時可能遇到的任何問題。祝好運！
相關產品推薦：
AnyGantt-構建復雜且內容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
15次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線