在jQuery中编写一个雷达图表-慕枫宁波网站建设
宁波网站建设 | 2017-10-11
如果你进入了前端开发，你就无法从两件事情中解脱出来——jQuery和数据可视化。jQuery是最受欢迎的JavaScript库之一，它被超过70%的顶级网站所使用。随着数据越来越多，你迟早要用图表来解决问题。
这就是本文结合jQuery创建图表的原因的是雷达图表，你也可以借鉴这篇文章来制作其他图表。
我把我们的图表分为四个易于遵循的步骤。但在我们开始之前，我们先来看看我们要做什么:
步骤1:获取数据
这通常是制作图表的第一步。为了本教程，我将使用表示分配的预算和公司实际支出的虚拟数据。
FusionCharts同时接受JSON和XML数据格式。我将使用JSON作为web的标准数据交换格式。首先，我们需要定义一个category，其中包含分配预算的所有类别。它将是这样的对象数组:
"categories": [{
"category": [{
"label": "Engineering"
}, {
"label": "Sales"
}
// more categories
]
}]
接下来，我们需要将我们想要在dataset中绘制的数据放在一起。在dataset内，你可以为你想要绘制的每一组数据提供一个对象。在我们的案例中，我们有两个系列——Allocated Budget 和 Actual Spend
"seriesname": "Allocated Budget",
"data": [{
"value": "10000"
}, {
"value": "16500"
}
// more data points for first series
]
}, {
"seriesname": "Actual Spend",
"data": [{
"value": "8000"
}, {
"value": "9500"
}
// more data points for first series
]
}]
步骤2:包括依赖关系
我们的项目依赖于以下JavaScript文件:
可以通过CDN下载
3 FusionCharts JS文件:FusionCharts。js,fusioncharts.charts。js和powercharts.js。
jQuery图表插件
<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<!-- FusionCharts files-->
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript" src="powercharts.js"></script>
<!-- jQuery plugin -->
<script type="text/javascript" src="jquery-plugin.js"></script>
步骤3:创建并选择一个图表容器
HTML <div >元素最适合做图表。对于页面上的每个图表，您应该有一个单独的< div >容器。定义一个容器，并通过jQuery的$ selector来选择它:
HTML:
<div id="radar-chart">Radar chart will load here.</div>
$("#radar-chart")
第四步:插入图表
差不多了，现在我们只需要使用插件提供的insertFusionCharts方法将图表插入到我们的页面。下面是我们的做法:
$("#radar-chart").insertFusionCharts({
type: 'radar',
width: '100%',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "2015 Budget for Acme Inc.",
"captionFontSize": "22",
// more chart configuration options
},
"categories": [
// explained in step-1
],
"dataset": [
// explained in step-1
]
}
});
以上代码段中的大部分术语都是不言而喻的，我就在这里简述几个重点:
type设置我们想要绘制的图表类型。
width和height定义了图表的尺寸。
dataFormat设置了传递数据的格式(json或xml)。
dataSource包含图表配置选项和我们想要绘制的数据。图表配置选项将在chart对象中，技术上称为图表属性(在FusionCharts中)。dataset和categories在步骤1中。
