尝试使用 JChartFX 和 JQUERY 实现图表

Trying to Implement a chart using JChartFX and JQUERY

本文关键字：JQUERY 实现 JChartFX      更新时间：2023-09-26

当我使用以下代码时，屏幕上没有任何内容显示。不确定我是否遗漏了某些内容或使用错误版本的 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>

我也试过这个，但它不起作用。似乎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

相关文章：