尝试使用JChartFX和JQUERY实现图表

时间:2013-09-17 16:32:48

标签: javascript jquery html5 jchartfx

当我使用以下代码时,我的屏幕上没有显示任何内容。不确定我是否遗漏了某些内容或使用了错误版本的JQUERY。我正在使用最新版本的JChartFX,我正在尝试修复3d图表

<!DOCTYPE HTML>

<html lang="en-US"> <!--<![endif]-->
<head>
<title>Graph Example </title>

<style type="text/css">
#targetchart 
{    
width: 500px;    
height: 375px;    
padding: 4px;    
border: 1px solid #dddddd;    
background: #eeeeee
}

#targetchart h3 {    
text-align: center;    
margin: 0;  
}
</style>

<link href="jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/confirm.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="js/jchartfx.system.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector3d.js"></script>


<script type="text/javascript">
var chart1;$(document).ready(function ($) {         
    var items = [
                    { "Sales": 2200, "Month": "Jan" },                        
        { "Sales": 1500, "Month": "Feb" },                        
        { "Sales": 2100, "Month": "Mar" },                        
        { "Sales": 2600, "Month": "Apr" },                        
        { "Sales": 3200, "Month": "May" },                        
        { "Sales": 3600, "Month": "Jun" },
            ];
            $("div", "ChartDiv1").chart({                        
        gallery: cfx.Gallery.Bar,                        
        view3D: {                                
            enabled: true,                                
            rotated: true,                                
            angleX: 30,                                
            angleY: -20,                                
            boxThickness: 10,                                
            depth: 160,                                
            shadow: cfx.Shadow.fixed                        
        },                        
        dataValues:items,                        
        titles: [{                                        

text: "Configuring 3D     Charts"                                
            }]                
    });
});
 </script>
</head>

<body>

<div id="ChartDiv1" style="width:500px;height:375px;display:inline-block"></div>

</body>

</html>

1 个答案:

答案 0 :(得分:1)

我也试过这个,但是不行。似乎jchartfx不适用于更高版本的jQuery ver。 1.9.1。

使用它们(在样本中):

<script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-1.7.1.js"></script>  
<script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-ui-1.8.18.custom.min.js"></script>

来源:http://community.jchartfx.com/forums/p/113/281.aspx