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 保存為項目中的 dev 依賴項。
既然我們知道了如何安裝 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 描繪多家移動設備公司的銷售額。
這里，“數據集”屬性包含我們將在圖表中顯示的實際 JSON 數據，而“類別”包含 X 軸和 Y 軸坐標的數據。
結論
在本教程中，我們使用了幾個示例來演示如何利用 FusionCharts 庫中的可用功能在 JavaScript 中創建不同的圖表。
以上就是如何使用 FusionCharts.js 創建您的第一個圖表？的詳細內容，更多請關注www.92cms.cn其它相關文章！
