极客笔记如何使用FusionCharts.js创建你的第一个图表
FusionCharts是一个JavaScript库，当你想要创建图表和地图并将它们放入你的Web应用程序时，可以使用它。在本教程中，我们将展示如何使用FusionCharts.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数据，我们将把它传递给 chartConfig的”data”属性，在创建FusionChart对象的实例时需要使用到。 除此之外，在”chartConfig”对象中还有一些属性，特别是在”chart”属性中，我们有不同的子属性，比如 标题，副标题都是在绘制条形图时所必需的。 示例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中创建不同的图表。