整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
當(dāng)今數(shù)據(jù)驅(qū)動(dòng)的世界中，數(shù)據(jù)可視化簡(jiǎn)化了復(fù)雜信息，賦予個(gè)人做出明智決策的能力。其中一種特別有價(jià)值的圖表類(lèi)型是資源圖表，它有助于高效的資源分配。本教程將是您創(chuàng)建動(dòng)態(tài)資源圖表的必備指南，使用JavaScript。
資源圖表是一種甘特圖類(lèi)型，用于可視化有關(guān)資源利用的數(shù)據(jù)，例如設(shè)備、員工等。它提供了全面的概述，使得及時(shí)做出明智決策變得更加容易。舉個(gè)例子，在本教程中，我將以球場(chǎng)為單位代表2022年卡塔爾世界杯的賽程，讓您可以追蹤每場(chǎng)比賽的時(shí)間和地點(diǎn)。
準(zhǔn)備好您的編碼工具，通過(guò)本指南結(jié)束時(shí)，您將能夠創(chuàng)建自己基于JavaScript的資源圖表，并擁有一個(gè)有價(jià)值的工具，用于追蹤您下一個(gè)喜愛(ài)的錦標(biāo)賽、服務(wù)器狀態(tài)、員工項(xiàng)目分配，或者其他類(lèi)似的事物。
您是否對(duì)我們即將創(chuàng)建的內(nèi)容感到興奮？繼續(xù)閱讀，您將學(xué)會(huì)如何創(chuàng)建一個(gè)JavaScript資源圖表，就像下面展示的一樣。
感到好奇嗎？讓我們一起開(kāi)始這激動(dòng)人心的旅程吧！
資源圖表乍一看可能會(huì)顯得復(fù)雜，因?yàn)樗褂盟綏l來(lái)表示時(shí)間段。然而，我向您保證，一旦您掌握了它，就會(huì)發(fā)現(xiàn)它其實(shí)非常簡(jiǎn)單。您可以通過(guò)以下四個(gè)基本步驟來(lái)構(gòu)建這個(gè)圖表：
現(xiàn)在，讓我們?cè)敿?xì)了解每個(gè)步驟。
首先，創(chuàng)建一個(gè)基本的HTML頁(yè)面，用于承載您的JavaScript資源圖表。在HTML文檔的主體中，添加一個(gè)HTML塊元素，比如<div>，它將作為您即將創(chuàng)建的圖表的容器。給它一個(gè)ID，在您后面創(chuàng)建圖表時(shí)，將在JavaScript代碼中引用它。為了確保圖表使用正確的位置，可以在<style>塊中定義一些CSS規(guī)則。
下面是一個(gè)以這種方式創(chuàng)建的簡(jiǎn)單網(wǎng)頁(yè)的示例。我將<div>元素命名為“container”，并調(diào)整其高度和寬度，使圖表占據(jù)整個(gè)屏幕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt 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>
在數(shù)據(jù)可視化方面，JavaScript圖表庫(kù)是非常寶貴的工具。關(guān)鍵是找到一個(gè)不僅滿足您的需求，而且支持您尋找的特定圖表類(lèi)型的庫(kù)。
在本教程中，我將使用AnyChart，這是一個(gè)長(zhǎng)期存在的JavaScript圖表庫(kù)，支持資源圖表，并提供全面的文檔，而且它是免費(fèi)的（除非您將其集成到商業(yè)應(yīng)用程序中）。如果您選擇使用其他庫(kù)，整個(gè)過(guò)程基本上是一樣的。
您可以通過(guò)兩種主要選項(xiàng)來(lái)包含所選庫(kù)的必要JavaScript文件：下載它們并在本地使用，或者通過(guò)CDN（內(nèi)容傳送網(wǎng)絡(luò)）直接鏈接到它們。在本教程中，我將選擇CDN的方式。下面是在HTML頁(yè)面的<head>部分鏈接所需腳本的示例。
圖表的代碼將位于HTML頁(yè)面的<body>部分的<script>標(biāo)簽中。或者，如果更適合您的項(xiàng)目結(jié)構(gòu)，也可以將其放在<head>部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
// The place for the following chart’s code.
</script>
</body>
</html>
現(xiàn)在，讓我們加載數(shù)據(jù)。在本教程中，將可視化2022年FIFA世界杯的賽程。數(shù)據(jù)以JSON格式在提供的GitHub gist上可用。
數(shù)據(jù)由一系列對(duì)象組成，每個(gè)對(duì)象代表一個(gè)球場(chǎng)。您將在每個(gè)球場(chǎng)對(duì)象中找到其名稱(chēng)和城市等詳細(xì)信息。此外，還有一個(gè)名為“periods”的屬性，其中包含在該球場(chǎng)舉辦的比賽列表。每場(chǎng)比賽由兩支參賽國(guó)家的名稱(chēng)和比賽結(jié)果表示。
為了正確地將這種類(lèi)型的數(shù)據(jù)輸入到資源圖表中，可以使用anychart.data.loadJsonFile()方法。下面是加載數(shù)據(jù)的代碼片段：
anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json");
數(shù)據(jù)加載完畢后，您現(xiàn)在可以繼續(xù)，看看如何通過(guò)幾行JavaScript代碼轉(zhuǎn)化為一個(gè)完全功能的資源圖表。
首先，添加anychart.onDocumentReady()函數(shù)，它封裝了確保您的代碼僅在頁(yè)面完全加載時(shí)執(zhí)行的所有必要代碼。
<script>
anychart.onDocumentReady(function () {
// The resource chart data and code will be in this section.
});
</script>
接下來(lái)，加載數(shù)據(jù)并創(chuàng)建一個(gè)數(shù)據(jù)樹(shù)。
anychart.onDocumentReady(function () {
// load the data
anychart.data.loadJsonFile(
"https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
function (data) {
// create a data tree
var treeData=anychart.data.tree(data, 'as-table’);
}
);
});
然后，使用ganttResource()方法創(chuàng)建資源甘特圖，并使用data()方法設(shè)置您的數(shù)據(jù)樹(shù)。
// create a resource gantt chart
var chart=anychart.ganttResource();
// set the data for the chart
chart.data(treeData);
將圖表放置在第1步中引入的<div>容器中，最后使用draw()方法繪制圖表。
// set the container
chart.container("container");
// draw the chart
chart.draw();
哇！您已成功使用JavaScript創(chuàng)建了一個(gè)簡(jiǎn)單而完全功能的資源圖表。看看它在實(shí)際中是如何呈現(xiàn)的；這個(gè)圖表的交互版本可以在這里找到。為了您的方便，還提供了基本資源圖表的完整代碼。
有了這個(gè)資源圖表，您可以輕松地可視化哪些比賽在哪些球場(chǎng)舉行，您可以在右側(cè)的比賽部分滾動(dòng)查看所有比賽。但還有更多內(nèi)容可以探索，所以讓我們繼續(xù)定制這個(gè)交互式數(shù)據(jù)可視化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script data-fr-src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// load the data
anychart.data.loadJsonFile(
"https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
function (data) {
// create a data tree
var treeData=anychart.data.tree(data, "as-table");
// create a resource gantt chart
var chart=anychart.ganttResource();
// set the data for the chart
chart.data(treeData);
// set the container
chart.container("container");
// draw the chart
chart.draw();
}
);
});
</script>
</body>
</html>
現(xiàn)在基本的基于JavaScript的資源圖表已經(jīng)就緒，讓我們探索一些增強(qiáng)其視覺(jué)效果和功能的方法。
為了提高資源圖表的視覺(jué)吸引力，讓我們深入一些可能的行和列的調(diào)整。
首先，您可以為行的選定和懸停狀態(tài)設(shè)置自定義顏色，并調(diào)整分隔位置以獲得更好的內(nèi)容可見(jiàn)性。此外，考慮指定默認(rèn)行高，以便整潔地呈現(xiàn)和輕松閱讀行項(xiàng)目。
// customize the rows
chart
.rowSelectedFill("#D4DFE8")
.rowHoverFill("#EAEFF3")
.splitterPosition(230);
// set the row height
chart.defaultRowHeight(50);
現(xiàn)在，讓我們繼續(xù)配置列。在第一列中，您可以選擇將一個(gè)簡(jiǎn)單的數(shù)字標(biāo)簽“#”作為標(biāo)題，并自定義其寬度。
對(duì)于第二列，您可以將球場(chǎng)名稱(chēng)設(shè)置為粗體，以突出顯示，并將城市名稱(chēng)放在球場(chǎng)名稱(chēng)的正下方。根據(jù)需要調(diào)整列寬，以舒適地容納內(nèi)容。
// customize the column settings:
// get the data grid
var dataGrid=chart.dataGrid();
// set the fixed columns mode
dataGrid.fixedColumns(true);
// first column
dataGrid
.column(0)
.title("#")
.width(30
.labels({ hAlign: "center" });
// second column
dataGrid
.column(1)
.title("Stadium")
.width(200)
.labels()
.useHtml(true)
.format(function () {
return (
"<strong>" + this.name.toString() + "</strong> <br>" + this.item.get("city")
);
});
現(xiàn)在，讓我們通過(guò)在時(shí)間軸條上直接顯示比賽結(jié)果來(lái)增強(qiáng)資源圖表。這樣可以快速查看比賽結(jié)果，而無(wú)需參考其他地方。
為了實(shí)現(xiàn)這一點(diǎn)，啟用時(shí)間軸周期上的標(biāo)簽，并使用useHtml()方法應(yīng)用自定義樣式。
// configure the period labels:
// get the period labels
var periodLabels=chart.getTimeline().periods().labels();
// set the period labels
periodLabels
.enabled(true)
.useHtml(true)
.format(
"<span style='color:#fff; font-size: 12px;'>{%result}</span>"
);
在資源條本身的額外信息的基礎(chǔ)上，圖表現(xiàn)在一目了然地提供了更豐富的信息。
為了獲得美觀的用戶(hù)體驗(yàn)，考慮為圖表的視覺(jué)方面增添一些調(diào)味。
首先，將圖表的背景顏色設(shè)置為淺灰色。
chart.background("#edeae8 0.8");
接下來(lái)，從時(shí)間軸中作為元素訪問(wèn)條形，并對(duì)它們的填充和描邊顏色進(jìn)行調(diào)整。
var elements=chart.getTimeline().elements();
elements.normal().fill("#9a1032 0.8");
elements.normal().stroke("#212c68");
再進(jìn)一步，可以使用函數(shù)根據(jù)條件動(dòng)態(tài)填充條形的顏色。例如，比賽結(jié)果可以是這樣的一個(gè)條件。因此，該函數(shù)檢查比賽結(jié)果，如果是平局，則將條形涂成綠色；否則，涂成紅色。這提供了一種有趣的方式，可以通過(guò)條形的顏色立即辨別比賽的結(jié)果。
// 自定義條形的顏色：
// 獲取元素
var elements=chart.getTimeline().elements();
// 檢查當(dāng)前項(xiàng)目是否為平局，如果是，則以不同的顏色填充
elements.normal().fill(function() {
var result=this.period.result;
var scores=result.split("-").map(Number);
if (scores[0]===scores[1]) {
return "#11A055 0.8";
} else {
return "#9a1032 0.8";
}
});
elements.normal().stroke("#212c68");
現(xiàn)在，是時(shí)候微調(diào)工具提示，以提供更好的用戶(hù)體驗(yàn)。
為了保持工具提示簡(jiǎn)潔明了，配置它在懸停在特定條形上時(shí)顯示球隊(duì)名稱(chēng)和比賽結(jié)果。
// 配置工具提示
var tooltip=chart.getTimeline().tooltip();
tooltip
.useHtml(true)
.format(function(e) {
var tooltipText;
if (typeof e.period==="undefined") {
tooltipText=e.item.la.city;
} else {
var period=e.period;
tooltipText=period.result;
}
return tooltipText;
});
這些微小的調(diào)整顯著提高了呈現(xiàn)數(shù)據(jù)的視覺(jué)清晰度。現(xiàn)在，下面是資源圖表的最終版本。您可以在此處探索這個(gè)最終圖表的交互版本。隨意探索并與之交互。為了方便起見(jiàn)，下面提供了最終資源圖表的完整代碼。
/準(zhǔn)備echarts腳本文件
官網(wǎng)下載最新版本：https://echarts.apache.org/zh/download.html
開(kāi)源庫(kù)下載：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js
//5.33改成最新版本的版本號(hào) 就可以下載最新版本了
下載第三方水球庫(kù)插件：https://github.com/ecomfe/echarts-liquidfill
2.添加一個(gè)事件來(lái)加載圖表腳本，我用的的頁(yè)面加載時(shí) ，也可以添加后臺(tái)服務(wù)組件，通過(guò)后臺(tái)服務(wù)組件事件：服務(wù)響應(yīng)時(shí)來(lái)調(diào)用腳本 可以很方便的綁定數(shù)據(jù)
3.添加剛才下載echarts腳本文件
添加第三方水球插件：
引入腳本
要?jiǎng)?chuàng)建液體填充圖表，您需要有一個(gè)類(lèi)型為'liquidFill'. 一個(gè)基本選項(xiàng)可能是：
option={ series: [{ type: 'liquidFill', data: [0.6] }] };
很容易創(chuàng)建一個(gè)帶有多個(gè)波浪的液體填充圖表，或者表示多個(gè)數(shù)據(jù)，或者提高圖表的視覺(jué)效果。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3]}]};
這將在 60%、50%、40% 和 30% 的位置創(chuàng)建一個(gè)帶有波浪的圖表。
要為液體填充圖表系列設(shè)置顏色，請(qǐng)?jiān)O(shè)置color為顏色數(shù)組。要設(shè)置不透明度，請(qǐng)使用itemStyle.opacity和itemStyle.emphasis.opacity用于普通樣式和懸停樣式。
option={ series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3], color: ['red', '#0f0', 'rgb(0, 0, 255)'], itemStyle: { opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] };您還可以通過(guò)以下方式設(shè)置單個(gè)數(shù)據(jù)項(xiàng)的顏色和不透明度：
option={ series: [{ type: 'liquidFill', data: [0.5, 0.4, { value: 0.3, itemStyle: { color: 'red', opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] }] };為了防止波浪向左或向右移動(dòng)，您可以簡(jiǎn)單地設(shè)置waveAnimation為false。要禁用波浪上升的動(dòng)畫(huà)，請(qǐng)將animationDuration和設(shè)置animationDurationUpdate為 0。
option={ series: [{ type: 'liquidFill', waveAnimation: false, animationDuration: 0, animationDurationUpdate: 0, data: [0.6, 0.5, 0.4, 0.3] }] };您可以將 設(shè)置amplitude為 0 以產(chǎn)生靜止波。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], amplitude: 0, waveAnimation: 0 }] };在這種情況下建議設(shè)置waveAnimation為 false 以禁用動(dòng)畫(huà)以考慮性能。
要更改單個(gè)波形，請(qǐng)覆蓋數(shù)據(jù)項(xiàng)中的選項(xiàng)。
option={ series: [{ type: 'liquidFill', data: [0.6, { value: 0.5, direction: 'left', itemStyle: { color: 'red' } }, 0.4, 0.3] }] };您可以使用 backgroundStyle 選項(xiàng)來(lái)設(shè)置背景形狀的筆觸、填充樣式。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], backgroundStyle: { borderWidth: 5, borderColor: 'red', color: 'yellow' } }] };要隱藏輪廓，只需設(shè)置outline.show為false。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], outline: { show: false } }] };水填充圖表的形狀。有可能：
options=[{ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], shape: 'diamond' }] }];option={
series: [{
type: 'liquidFill',
data: [0.5, 0.4, 0.3, 0.2],
shape: 'container',
outline: {
show: false
}
}]
};option={ series: [{ type: 'liquidFill', data: [0.6, 0.55, 0.4, 0.25], radius: '60%', outline: { show: false }, backgroundStyle: { borderColor: '#156ACF', borderWidth: 1, shadowColor: 'rgba(0, 0, 0, 0.4)', shadowBlur: 20 }, shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z', label: { position: ['38%', '40%'], formatter: function() { return 'ECharts\nLiquid Fill'; }, fontSize: 40, color: '#D94854' } }] };一般來(lái)說(shuō)，液體填充圖表中有兩種類(lèi)型的動(dòng)畫(huà)。
第一種是初始動(dòng)畫(huà)，具有升浪的效果。此動(dòng)畫(huà)的緩動(dòng)方法由 控制，animationEasing其持續(xù)時(shí)間由控制animationDuration。
第二種是更新動(dòng)畫(huà)，通常在數(shù)據(jù)變化、波高變化時(shí)使用。它們由animationEasingUpdate和控制animationDurationUpdate。
例如，要禁用提升動(dòng)畫(huà)并將更新動(dòng)畫(huà)時(shí)間設(shè)置為 2 秒cubicOut，可以使用以下選項(xiàng)：
var mytubiao=echarts.init(document.getElementById("mytb"))
option={
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
animationDuration: 0,
animationDurationUpdate: 2000,
animationEasingUpdate: 'cubicOut'
}]
};
mytubiao.setOption(option);
setTimeout(function () {
mytubiao.setOption({
series: [{
type: 'liquidFill',
data: [0.8, 0.6, 0.4, 0.2]
}]
})
}, 3000);
默認(rèn)情況下，液體填充圖表的文本標(biāo)簽顯示第一個(gè)數(shù)據(jù)的百分比。例如，對(duì)于帶有 data 的圖表[0.6, 0.5, 0.4, 0.3]，默認(rèn)文本是60%.
要更改文本，您可以使用label.formatter，它可以設(shè)置為字符串或函數(shù)。
如果是字符串，{a}則表示系列名稱(chēng)、{b}數(shù)據(jù)名稱(chēng)和{c}數(shù)據(jù)值。
option={ series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: '{a}\n{b}\nValue: {c}', fontSize: 28 } }] };
此示例的標(biāo)簽文本為'Liquid Fill\nFirst Data\nValue: 0.6'.
formatter這與作為函數(shù)使用的結(jié)果相同：
option={ series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: function(param) { return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; }, fontSize: 28 } }] };
文本位置默認(rèn)在中心。label.position可以設(shè)置為'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'向左（由 控制label.align，可以是'left'、'center'或'right'）和'20%'頂部（由 控制label.baseline，可以是'top'、'middle'或'bottom'）。
陰影
默認(rèn)情況下，波浪和輪廓上有陰影。以下是如何更改它們。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], itemStyle: { shadowBlur: 0 }, outline: { borderDistance: 0, itemStyle: { borderWidth: 5, borderColor: '#156ACF', shadowBlur: 20, shadowColor: 'rgba(255, 0, 0, 1)' } } }] };
添加工具提示：
option={ series: [{ type: 'liquidFill', data: [0.6], name: 'Liquid Fill' }], tooltip: { show: true } };
要在 wave 上添加點(diǎn)擊事件：
chart.setOption(option); chart.on('click', function() { console.log(arguments); // do something useful here });
與任何其他圖表類(lèi)型一樣，上述代碼只會(huì)觸發(fā)波事件。如果要跟蹤整個(gè)畫(huà)布或特定元素上的事件，可以將偵聽(tīng)器添加到 zrender，例如：
chart.getZr().on('click', function() { console.log(arguments); });
不可交互
要使元素（例如，波浪）不可交互，只需設(shè)置silent為true.
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], silent: true }] };
API
液體填充圖表的默認(rèn)選項(xiàng)是：
{
data: [],
color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
center: ['50%', '50%'],
radius: '50%',
amplitude: '8%',
waveLength: '80%',
phase: 'auto',
period: 'auto',
direction: 'right',
shape: 'circle',
waveAnimation: true,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
animationDuration: 2000,
animationDurationUpdate: 1000,
outline: {
show: true,
borderDistance: 8,
itemStyle: {
color: 'none',
borderColor: '#294D99',
borderWidth: 8,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.25)'
}
},
backgroundStyle: {
color: '#E3F7FF'
},
itemStyle: {
opacity: 0.95,
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.4)'
},
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
align: 'center',
baseline: 'middle'
position: 'inside'
},
emphasis: {
itemStyle: {
opacity: 0.8
}
}
}
數(shù)據(jù){(數(shù)字|對(duì)象)[]}
每個(gè)數(shù)據(jù)項(xiàng)的值應(yīng)介于 0 和 1 之間。
數(shù)據(jù)項(xiàng)也可以是配置單個(gè)項(xiàng)的選項(xiàng)的對(duì)象。
option={
series: [{
type: 'liquidFill',
data: [0.6, {
value: 0.5,
itemStyle: {
color: 'red'
}
}, 0.4, 0.3]
}]
};
這定義了具有第二波紅色的圖表。
顏色 {string[]}
波浪顏色。
形狀 {字符串}
水填充圖表的形狀。它可以是默認(rèn)符號(hào)之一：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'. 或者，以 . 開(kāi)頭的 SVG 路徑'path://'。
中心{字符串[]}
圖表的位置。第一個(gè)值是 x 位置，第二個(gè)值是 y 位置。每個(gè)值都可以是一個(gè)相對(duì)值，例如'50%'，它是相對(duì)于容器寬度和高度的較小值的，也可以是一個(gè)絕對(duì)值，例如100px。
半徑 {字符串}
圖表的半徑，可以是相對(duì)值，如'50%'，相對(duì)于容器寬度和高度的較小值，也可以是絕對(duì)值，如100px。
幅度{數(shù)}
波的幅度，以像素或百分比為單位。如果它是百分比，它是相對(duì)于直徑的。
波長(zhǎng) {字符串|數(shù)字}
波的波長(zhǎng)，可以是相對(duì)值，例如'50%'，它是相對(duì)于直徑的，也可以是絕對(duì)值，例如'100px'或100。
階段{編號(hào)}
波的相位，以弧度表示。默認(rèn)情況下'auto'，當(dāng)每個(gè)波的相位Math.PI / 4大于前一個(gè)時(shí)，它被設(shè)置為 。
周期 {number|'auto'|function}
向前移動(dòng)一個(gè)波長(zhǎng)所需的毫秒數(shù)。默認(rèn)情況下，'auto'當(dāng)前面的波速度較大時(shí)，它被設(shè)置為 。
它也可以是格式化程序功能。
option={
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '70%',
phase: 0,
period: function (value, index) {
// This function is called four times, each for a data item in series.
// `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.
return 2000 * index + 1000;
}
}]
}
方向 {字符串}
波浪移動(dòng)的方向，應(yīng)該是'right'或'left'。
waveAnimation {boolean}
是否啟用向左或向右移動(dòng)的波浪。
動(dòng)畫(huà)緩動(dòng) {字符串}
初始動(dòng)畫(huà)的緩動(dòng)方法，當(dāng)波浪從底部開(kāi)始上升時(shí)。
animationEasingUpdate {字符串}
其他動(dòng)畫(huà)的緩動(dòng)方法，例如，當(dāng)數(shù)據(jù)值改變和波浪位置改變時(shí)。
動(dòng)畫(huà)持續(xù)時(shí)間 {數(shù)字}
初始動(dòng)畫(huà)持續(xù)時(shí)間，以毫秒為單位。
animationDurationUpdate {數(shù)字}
其他動(dòng)畫(huà)持續(xù)時(shí)間，以毫秒為單位。
大綱.show {布爾}
是否顯示輪廓。
大綱.borderDistance {number}
邊界和內(nèi)圈之間的距離。
outline.itemStyle.borderColor {字符串}
邊框顏色。
outline.itemStyle.borderWidth {number}
邊框?qū)挾取?/p>
outline.itemStyle.shadowBlur {number}
輪廓陰影模糊大小。
outline.itemStyle.shadowColor {字符串}
輪廓陰影顏色。
backgroundStyle.color {字符串}
背景填充顏色。
backgroundStyle.borderWidth {字符串}
背景描邊線寬。
backgroundStyle.borderColor {字符串}
背景描邊線寬。
backgroundStyle.itemStyle.shadowBlur {number}
背景陰影模糊大小。
backgroundStyle.itemStyle.shadowColor {字符串}
背景陰影顏色。
backgroundStyle.itemStyle.opacity {number}
背景不透明度。
itemStyle.opacity {number}
波浪不透明度。
itemStyle.shadowBlur {number}
波浪陰影寬度。
itemStyle.shadowColor {字符串}
波浪陰影顏色。
強(qiáng)調(diào).itemStyle.opacity {number}
懸停時(shí)波浪不透明度。
標(biāo)簽.show {布爾}
是否顯示標(biāo)簽文本。
label.color {字符串}
在背景上顯示時(shí)文本的顏色。
label.insideColor {字符串}
在波形上顯示時(shí)文本的顏色。
label.fontSize {數(shù)字}
標(biāo)簽字體大小。
標(biāo)簽.fontWeight {字符串}
標(biāo)簽字體粗細(xì)。
標(biāo)簽對(duì)齊{字符串}
文本對(duì)齊，應(yīng)該是'left', 'center', 或'right'.
label.baseline {字符串}
文本垂直對(duì)齊，應(yīng)為'top'、'middle'或'bottom'。
標(biāo)簽位置 {string|string[]}
文本位置默認(rèn)在中心。label.position可以設(shè)置為'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'左側(cè)和'20%'頂部。
數(shù)據(jù)時(shí)代，收集和使用數(shù)據(jù)的需求正在爆發(fā)式增長(zhǎng)，數(shù)據(jù)可視化也變得愈加重要。開(kāi)發(fā)人員在想方設(shè)法將不同數(shù)據(jù)庫(kù)中的記錄整合到儀表板和漂亮的圖表中，向人們快速直觀地展示信息。
在過(guò)去十年中數(shù)據(jù)可視化技術(shù)不斷改進(jìn)，結(jié)果涌現(xiàn)了很多高水平的圖表庫(kù)。
21 世紀(jì)初期，人們使用服務(wù)端圖像位圖來(lái)生成圖表。那時(shí)像 Silverlight 和 Flash 這樣的插件提供了豐富的交互式圖表體驗(yàn)，代價(jià)是減少電池壽命、拖慢下載速度并耗費(fèi)更多系統(tǒng)資源。
移動(dòng)設(shè)備興起之后，移動(dòng)平臺(tái)不再支持插件并開(kāi)始轉(zhuǎn)向開(kāi)放客戶(hù)端技術(shù)，這些技術(shù)可以在任何平臺(tái)上運(yùn)行，成為了開(kāi)發(fā)人員的首選。同時(shí)，觸摸手勢(shì)縮放和非常高分辨率的屏幕開(kāi)始流行，使得無(wú)關(guān)分辨率的矢量圖表廣受歡迎。
隨之而來(lái)的就是數(shù)據(jù)可視化的時(shí)代，SVG 可擴(kuò)展矢量圖像和 JavaScript 成為主角。今天的圖表技術(shù)可支持所有瀏覽器平臺(tái)，支持交互性和動(dòng)畫(huà)，并且不需要特殊的插件。這些圖表在高分辨率設(shè)備中也有很好的顯示效果。我們可以在 JS 開(kāi)發(fā)中使用許多 JavaScript 圖表庫(kù)實(shí)現(xiàn)這些目標(biāo)。
市面上有很多 JavaScript 圖表庫(kù)，本文則列出了其中的幾款佼佼者，可以用在你的新項(xiàng)目中。
以下就是 2019 年的頂級(jí) Javascript 圖表庫(kù)名單。
D3.js 是一個(gè)圖形 JavaScript 庫(kù)，功能眾多，十分強(qiáng)大。你可以用它對(duì)文檔做數(shù)據(jù)驅(qū)動(dòng)的轉(zhuǎn)換，然后將任意數(shù)據(jù)綁定到 DOM 上。
D3 是非常優(yōu)秀的圖表庫(kù)。它有一些較小的技術(shù)模塊，如顏色、軸、輪廓、層次結(jié)構(gòu)、多邊形、緩動(dòng)等。這也意味著你需要學(xué)習(xí)很多知識(shí)才能用好它，上手并不容易。
即使用它創(chuàng)建簡(jiǎn)單的圖表也可能需要復(fù)雜的步驟。你需要明確定義包含圖表項(xiàng)和軸在內(nèi)的所有元素。它提供了一些示例，教你如何使用 CSS 來(lái)設(shè)置圖表元素的樣式。開(kāi)發(fā)者無(wú)法自動(dòng)應(yīng)用基于圖表的功能。
如果你想從零開(kāi)始設(shè)計(jì)復(fù)雜的圖表，完全按照自己的想法控制所有元素，那么這個(gè)庫(kù)就是你的首選。但如果時(shí)間緊迫，從頭開(kāi)始解決數(shù)據(jù)可視化項(xiàng)目需求可能就不是什么好主意了。
作為圖表庫(kù)來(lái)說(shuō)，D3.js 可以充當(dāng)構(gòu)建塊。開(kāi)發(fā)者可以用 D3 與 NVD3 一類(lèi)的方案配合工作。這個(gè)圖表庫(kù)完全免費(fèi)并開(kāi)源。
Highcharts 是市面流行的 JavaScript 圖表庫(kù)之一，并被許多大公司采用。為了提供對(duì) IE6 到 IE8 的兼容性，它先使用 SVG 然后轉(zhuǎn)向 VML 來(lái)生成圖表。它的示例圖表帶有一些很棒的功能，但看起來(lái)不怎么吸引人。它的文檔里有很多 API 文檔教程和相關(guān)主題。
它的 API 易于使用，開(kāi)發(fā)者可以使用配置選項(xiàng)來(lái)開(kāi)發(fā)圖表。對(duì)于個(gè)人和非商業(yè)用途，Highcharts 可免費(fèi)使用；證券行業(yè)等用途需要商業(yè)許可，而甘特圖和地圖圖表則需要單獨(dú)的許可證。
Chart.js 是一個(gè)開(kāi)源 JavaScript 庫(kù)，支持 8 種類(lèi)型的圖表。它只有 60kb，是一個(gè)非常小的 JS 庫(kù)。它支持的圖表類(lèi)型包括雷達(dá)、內(nèi)聯(lián)圖表、餅圖、條形圖、散點(diǎn)圖、面積圖、氣泡和混合等。它還支持時(shí)間序列。在呈現(xiàn)層面，它使用 canvas 元素并能響應(yīng)窗口大小調(diào)整縮放比率。它對(duì) IE9 向后兼容。要兼容 IE7 的話也可以使用 Polyfills。
初次使用它的示例時(shí)還能看到現(xiàn)代感的初始動(dòng)畫(huà)。實(shí)時(shí)添加數(shù)據(jù)點(diǎn)或序列時(shí)有平滑的動(dòng)畫(huà)效果。你可以調(diào)用 update() 函數(shù)來(lái)修改圖表選項(xiàng)并重繪圖表。
在它的網(wǎng)站中沒(méi)有展示示例源代碼，但可以在 GitHub 倉(cāng)庫(kù)中找到。它的 API 簡(jiǎn)潔直觀。用戶(hù)使用配置選項(xiàng)來(lái)創(chuàng)建和修改圖表。它的文檔內(nèi)容翔實(shí)，附帶代碼片段和屬性 API 的教程。
這個(gè)庫(kù)可免費(fèi)用于商業(yè)和個(gè)人用途。它是開(kāi)源項(xiàng)目。但對(duì)于更高級(jí)別的需求來(lái)說(shuō)，它提供的圖表類(lèi)型可能有點(diǎn)少。
......
點(diǎn)擊“了解更多”，查看全文
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
