如何使用 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 保存为项目中的 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 创建您的第一个图表？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
JavaScript难以学习吗？
Apr 03, 2025 am 12:20 AM
学习JavaScript不难，但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程，通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误，使用调试技巧。5)优化性能，遵循最佳实践。
如何实现视差滚动和元素动画效果，像资生堂官网那样？
或者：
怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？
Apr 04, 2025 pm 05:36 PM
实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
前端开发中如何实现类似 VSCode 的面板拖拽调整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中，如何实现类似于VSCode...
