HTML5和jQuery免费图表库jChartFX使用设置-控件新闻-慧都网

HTML5和jQuery免费图表库jChartFX使用设置

原创|其它|编辑：郝浩|2013-02-04 14:59:59.000|阅读 1602 次

概述：SoftwareFX已于推出一套为HTML5、jQuery和JavaScript开发者设计的免费图表库——jChartFX。而jChartFX非常的易于使用，你只需要添加一个html元素用于渲染图表，然后使用JavaScript 或是jQuery来充分利用全面和强大的API用来配置和自定义图表就可以了。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

SoftwareFX已于推出一套为HTML5、jQuery和JavaScript开发者设计的免费图表库——jChartFX。同时jChartFX非常的易于使用，你只需要添加一个html元素（通常是一个div）用于渲染图表，然后使用JavaScript 或是jQuery来充分利用全面和强大的API用来配置和自定义图表就可以了。

>>下载免费图表库jChartFX

在使用 jChartFX之前，需要将必要的 jChartFX 库复制到浏览器能够访问的位置。例如，你可以在你的网站上创建一个名为 jChartFX的文件夹，然后简单的拷贝所有的jChartFX 库到目录，接下来你可以通过添加<script>标签引用到你页面的<head>部分。

<head>
<link rel="stylesheet" type="text/css" href="chartfx.css" />
<script type="text/javascript" src="jChartFX/jchartfx.system.js"></script>
<script type="text/javascript" src="jChartFX/jchartfx.coreVector.js"></script>
</head>

接下来，需要定义一个html的DIV元素来承载页面正文中的图表，由DIV来控制图表显示的位置和尺寸。

<div id="ChartDiv" style="width:600px;height:400px;display:inline-block"></div>

由于我们希望图表在页面加载的时候生成，所以需要指定一个函数来处理onload事件，有很多种方法可以实现这个要求。如果使用的是一种particular框架，就可以简单使用页面的Body元素的onload属性来实现：

<body onload="loadChart()">

  若是使用的是JQuery 框架，你可以使用文档的ready事件来实现：

$(document).ready(function($){

然后，我们需要在可以负载的功能范围内声明一个图表变量：

<script type="text/javascript" language="javascript">
var chart1;        
 function loadChart()
 {        
chart1 = new cfx.Chart();
chart1.setGallery(Gallery.Pie);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
 }

</script>

调用图表的创建方法是非常重要的，因为它将触发图表渲染到指定的DIV。或者不是通过一个DIV对象的创建方法，可以简单地通过目标DIV的名字，删除调用getElementById的需求：

chart1 = new cfx.Chart();
chart1.setGallery(Gallery.Pie);
chart1.create('ChartDiv');

对于JQuery用户，可以在目标div中调用chart()：

<script language="javascript">
$(document).ready(function ($) {
 $("div", ".ChartDiv1").chart({
 gallery:cfx.Gallery.Pie
 });
});	        
  </script>

  通过以上这样的简单设置，就可以使用jChartFX进行图表的配置了或是风格化图表的样式等。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：慧都控件

上一篇：WPF图表控件Chart FX使用方法系列:如何绘制变化率下一篇：DXperience WinForms12.2帮助文档十：自定义字符格式