Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta carta pertama anda menggunakan FusionCharts.js?
FusionCharts 是一个 JavaScript 库,当您想要创建图表和地图并将其放入您的 Web 中时可以使用它应用。在本教程中,我们将展示如何使用 FusionChart.js 创建两个不同的图表。
在学习如何创建图表之前,第一件重要的事情是了解如何将 FusionCharts 安装到本地计算机上。
我们可以通过多种方式安装 FusionCharts。
您可以使用下面给出的CDN链接直接访问FusionCharts的文件。
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
您可以使用 NPM 将库作为依赖项安装到代码中。使用以下命令安装FusionCharts。
npm install --save fusioncharts
上述命令会将 FusionCharts 保存为项目中的 dev 依赖项。
既然我们知道了如何安装 FusionCharts,那么让我们来探讨一下我们将使用 FusionCharts 创建的几个图表示例。
第一个示例是一个简单的条形图,我们将在 FusionCharts 的帮助下创建它,该图按国家/地区描述了亿万富翁的数量。考虑下面所示的代码。
<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,这些属性在以下情况下都是必需的:我们正在绘制一个条形图。
在上面的示例中,我们使用简单的 JSON 数据创建了一个条形图,并将其呈现给浏览器。在下面的示例中,我们将创建一个更复杂的图表,其中我们将描绘具有多个块的融合图表。考虑下面所示的代码。
<!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 中创建不同的图表。
Atas ialah kandungan terperinci Bagaimana untuk mencipta carta pertama anda menggunakan FusionCharts.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!