資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FusionCharts.js 建立你的第一個圖表？
FusionCharts 是一個 JavaScript 庫，當您想要建立圖表和地圖並將其放入 Web 應用程式時可以使用它。在本教程中，我們將展示如何使用 FusionChart.js 建立兩個不同的圖表。
在我們學習如何建立圖表之前，首先要了解如何將 FusionCharts 安裝到我們的本地機器上。
安裝 FusionCharts
有多種方法可以安裝 FusionCharts。
使用 CDN
您可以使用下面給出的 CDN 連結直接訪問 FusionCharts 的檔案。
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
從 NPM 安裝
您可以使用 NPM 將庫作為依賴項安裝到您的程式碼中。使用以下命令安裝 FusionCharts。
npm install --save fusioncharts
以上命令會將 FusionCharts 作為開發依賴項儲存到您的專案中。
現在我們已經知道如何安裝 FusionCharts 了，讓我們探索幾個使用 FusionCharts 建立的圖表示例。
示例 1
第一個示例是一個簡單的條形圖，我們將藉助 FusionCharts 建立它，該圖顯示了按國家/地區劃分的億萬富翁數量。請考慮以下程式碼。
index.html
<html>
<head>
<title>FusionChart Example - 1</title>
<script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
const chartData = [{
"label": "United States","value": "735"
}, {
"label": "Mainland China","value": "539"
}, {
"label": "India", "value": "166"
}, {
"label": "Germany", "value": "134"
}, {
"label": "Russia", "value": "83"
}, {
"label": "Hong Kong", "value": "67"
}, {
"label": "Canada", "value": "64"
}, {
"label": "Brazil", "value": "62"
}, {
"label": "Italy", "value": "52"
}, {
"label": "Taiwan", "value": "51"
}];
const chartConfig = {
type: 'column2d',
renderAt: 'chart-container',
width: '100%',
height: '400',
dataFormat: 'json',
dataSource: {
// Configuration of Chart
"chart": {
"caption": "Billionares By Country Wise[2022]",
"subCaption": "According to Forbes",
"xAxisName": "Country",
"yAxisName": "Billionares",
"theme": "fusion",
},
// Actual Chart Data
"data": chartData
}
};
FusionCharts.ready(function() {
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts!!</div>
</body>
</html>
如果我們在瀏覽器中執行以上程式碼，我們將得到一個作為輸出繪製的條形圖。
解釋
在此程式碼中，我們首先建立了一個 JSON 資料，我們將其傳遞到建立 FusionChart 物件例項時所需的chartConfig的“data”屬性中。
除此之外，“chartConfig”物件中還有一些屬性，特別是“chart”屬性，其中包含一些子屬性，如caption、subCaption，這些屬性在繪製條形圖時都是必需的。
示例 2
在上面的示例中，我們使用簡單的 JSON 資料建立了一個條形圖，並將其渲染到瀏覽器中。在下面的示例中，我們將建立一個更復雜的圖表，其中我們將顯示一個包含多個塊的融合圖表。請考慮以下程式碼。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<title>FusionChart - Example 2</title>
</head>
<body>
<div id="chart-container">For Rendering!!</div>
<script>
FusionCharts.ready(function() {
var conversionChart = new FusionCharts({
type: 'bubble',
renderAt: 'chart-container',
width: '600',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Analysis of Mobile Devices Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "300000",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues": "1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"drawQuadrant": "1",
"quadrantLineAlpha": "80",
"quadrantLineThickness": "3",
"quadrantXVal": "50",
"quadrantYVal": "15000",
"quadrantLabelTL": "Low Price / High Sale",
"quadrantLabelTR": "High Price / High Sale",
"quadrantLabelBL": "Low Price / Low Sale",
"quadrantLabelBR": "High Price / Low Sale",
"yAxisLineThickness": "1",
"yAxisLineColor": "#999999",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "$50",
"x": "0"
},{
"label": "$100",
"x": "20",
"showverticalline": "1"
},{
"label": "$150",
"x": "40",
"showverticalline": "1"
},{
"label": "$200",
"x": "60",
"showverticalline": "1"
},{
"label": "$250",
"x": "80",
"showverticalline": "1"
}, {
"label": "$300",
"x": "100",
"showverticalline": "1"
}
]
}],
"dataset": [{
"color": "#00aee4",
"data": [{
"x": "35",
"y": "1500000",
"z": "24",
"name": "Xiaomi"
},{
"x": "80",
"y": "1850000",
"z": "26",
"name": "Samsung"
},{
"x": "45",
"y": "1945000",
"z": "19",
"name": "Nokia"
},{
"x": "65",
"y": "10500",
"z": "8",
"name": "OnePlus"
},{
"x": "100",
"y": "905000",
"z": "5",
"name": "Apple"
},{
"x": "32",
"y": "2200000",
"z": "10",
"name": "Asus"
},{
"x": "44",
"y": "1300000",
"z": "9",
"name": "Vivo"
}
]
}],
"trendlines": [{
"line": [{
"startValue": "20000",
"endValue": "30000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
},{
"startValue": "10000",
"endValue": "20000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}
]
}],
"vTrendlines": [{
"line": [{
"startValue": "44",
"isTrendZone": "0",
"color": "#0066cc",
"thickness": "1",
"dashed": "1",
"displayValue": "Gross Avg."
}]
}]
}
});
conversionChart.render();
});
</script>
</body>
</html>
使用“編輯並執行”按鈕執行此程式碼並檢視輸出。它將顯示一個具有多個象限的圖表。
解釋
在此示例中，我們嘗試使用 FusionCharts 顯示多個移動裝置公司的銷售情況。
這裡，“dataset”屬性包含我們將顯示在圖表中的實際 JSON 資料，而“categories”包含 X 和 Y 軸座標的資料。
結論
在本教程中，我們使用幾個示例演示瞭如何利用 FusionCharts 庫中提供的功能在 JavaScript 中建立不同的圖表。
更新時間： 2023年6月15日
381 次瀏覽
廣告