在jQuery中编写一个雷达图表-慕枫宁波网站建设

宁波网站建设 | 2017-10-11


如果你进入了前端开发,你就无法从两件事情中解脱出来——jQuery和数据可视化。jQuery是最受欢迎的JavaScript库之一,它被超过70%的顶级网站所使用。随着数据越来越多,你迟早要用图表来解决问题。

这就是本文结合jQuery创建图表的原因的是雷达图表,你也可以借鉴这篇文章来制作其他图表。


雷达图表


创建雷达图表- 4步过程
我把我们的图表分为四个易于遵循的步骤。但在我们开始之前,我们先来看看我们要做什么:

步骤1:获取数据
这通常是制作图表的第一步。为了本教程,我将使用表示分配的预算和公司实际支出的虚拟数据。
FusionCharts同时接受JSON和XML数据格式。我将使用JSON作为web的标准数据交换格式。首先,我们需要定义一个category,其中包含分配预算的所有类别。它将是这样的对象数组:

"categories": [{                                                          
  "category": [{                                                     
      "label": "Engineering"
    }, {
      "label": "Sales"
    }
    // more categories
  ]
}]

接下来,我们需要将我们想要在dataset中绘制的数据放在一起。在dataset内,你可以为你想要绘制的每一组数据提供一个对象。在我们的案例中,我们有两个系列——Allocated Budget 和 Actual Spend


"dataset": [{
  "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>


选择通过jQuery:

$("#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中。

上一篇:如何在Adobe Muse中添加一个HTML5视频播放器-慕枫宁波网站建设下一篇:使用.htaccess让URL的SEO更上一层楼-慕枫宁波网站建设
联系电话 400-6065-301

建站咨询 星星-总监

留言