jqplot使用dateAxisRenderer行不渲染，任何想法为什么？

时间：2011-08-25 13:56:49

标签： ruby-on-rails-3 jquery-plugins jqplot

此代码完美无缺：

在我看来：

<div id="chart1"></div>

然后是我的js：

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

当我更改我的js（从jqPlot site复制）时，我可以在x轴上包含日期，只有网格显示没有x轴或直线（y轴准确且存在）：

不起作用的新js代码：

$(document).ready(function(){

    var line1=[['2011-06-30 8:00AM',4], ['2011-7-30 8:00AM',6]];
    var plot2 = $.jqplot('chart1', [line1], {
      title:'Customized Date Axis',
      gridPadding:{right:35},
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%b %#d, %y'},
          min:'May 30, 2011',
          tickInterval:'1 month'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
    });
    });

注意我只将日期更改为2011，将div的ID重命名为“chart1”（如果与this jQPlot site比较）并添加了jqplot.dateAxisRenderer.min.js。

所以现在我有以下插件：

  • “jqplot.canvasTextRenderer.min.js”
  • “jqplot.canvasAxisLabelRenderer.min.js”
  • “jqplot.dateAxisRenderer.min.js”
  • “jqplot / jqplot.canvasAxisTickRenderer.min.js”
  • “jqplot / jquery.jqplot.min.js”

我正在追踪JS错误：

Uncaught TypeError: Cannot set property 'CanvasTextRenderer' of undefined in jqplot.canvasTextRenderer.min.js:30.

Cannot set property 'CanvasTextRenderer' of undefined in jqplot.canvasAxisLabelRenderer.min.js:30.

Cannot set property 'CanvasTextRenderer' of undefined in jqplot.dateAxisRenderer.min.js:30.

Cannot set property 'CanvasTextRenderer' of undefined in jqplot.canvasAxisTickRenderer.min.js:30.

我在这里做错了什么？任何帮助将不胜感激。我用Google搜索了2小时没有成功。

4 个答案:

答案 0 :(得分：1)

我创建了一个包含上面代码的简单html页面，它似乎可以正常工作。

<html>
<head>
  <link type="text/css" href="http://localhost/test1/atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.css" rel="stylesheet" />
  <script type="text/javascript" src="http://localhost/test1/atk4/templates/js/jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="http://localhost/test1/atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.js"></script>
  <script type="text/javascript" src="http://localhost/test1/atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>


  <script>
    $(document).ready(function(){
    var line1=[['2011-06-30 8:00AM',4], ['2011-7-30 8:00AM',6]];
    var plot2 = $.jqplot('chart1', [line1], {
    title:'Customized Date Axis',
     gridPadding:{right:35},
     axes:{
       xaxis:{
         renderer:$.jqplot.DateAxisRenderer,
         tickOptions:{formatString:'%b %#d, %y'},
         min:'May 30, 2011',
         tickInterval:'1 month'
       }
     },
     series:[{lineWidth:4, markerOptions:{style:'square'}}]
   });
  });
  </script>

  </head>
  <body>
     <div id="chart1"></div>
  </body>
</html>

在Windows 7上的firefox 3.6.22中为我生成以下输出

output of jqplot code

我正在使用jquery v1.5.1，所以可能会更新到最新版本并再试一次以防万一。

我只需要包含jquery.js，jqplot.js和dateAxisRenderer来实现这一点，所以也尝试删除其他渲染器，因为我不认为你在你提供的代码示例中使用了任何需要它的选项。

虽然这段代码在隔离方面运行良好，但我在其他地方读到了一个问题，一些浏览器没有按正确的顺序加载所有内容，并且需要在javascript之前加载css。

你在rails上使用ruby标记了这一点，所以如果你从一些框架代码中调用它并加载其他东西，也许订单有问题，所以改变它可能有帮助。

答案 1 :(得分：1)

一种可能性是jqPlot插件文件在jqPlot主插件文件加载之前加载，导致＆＃34; undefined＆＃34;错误。我遇到了你的问题，因为我使用RequireJS异步加载依赖项，而jqPlot主插件文件与插件文件相比是巨大的，所以首先加载了插件文件。

答案 2 :(得分：1)

我也遇到了你的问题。是否有可能，有两个＆＃34;类型＆＃34;脚本标签中的属性？像这样：

<script type="javascript" type="text/javascript" src="/jqplot/jquery.jqplot.js"></script>

答案 3 :(得分：0)

执行快速复制粘贴错误后，我注意到如果源链接位于02-03 18:42:54.413 828-844/system_process I/ActivityManager: Force stopping ru.tabor.search appid=10089 user=0: from pid 20405 02-03 18:42:54.414 828-844/system_process I/ActivityManager: Killing 30212:ru.tabor.search/u0a89 (adj 7): stop ru.tabor.search 02-03 18:42:54.445 828-5948/system_process I/WindowState: WIN DEATH: Window{18b92c9b u0 ru.tabor.search/ru.tabor.search.modules.authorization.AuthorizationActivity} 02-03 18:42:54.447 828-845/system_process I/WindowState: WIN DEATH: Window{1cd0cfe4 u0 ru.tabor.search/ru.tabor.search.modules.registration.RegistrationActivity} 02-03 18:42:54.519 828-844/system_process I/ActivityManager: Force finishing activity 3 ActivityRecord{25a8977f u0 ru.tabor.search/.modules.authorization.AuthorizationActivity t2593} 02-03 18:42:54.520 828-844/system_process I/ActivityManager: Force finishing activity 3 ActivityRecord{d516838 u0 ru.tabor.search/.modules.registration.RegistrationActivity t2593} 02-03 18:42:54.523 828-20666/system_process W/ActivityManager: Spurious death for ProcessRecord{21ff313b 0:ru.tabor.search/u0a89}, curProc for 30212: null 02-03 18:42:59.890 828-1247/system_process I/ActivityManager: START u0 {act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] flg=0x10100000 cmp=ru.tabor.search/.modules.authorization.AuthorizationActivity} from uid 10089 on display 0 02-03 18:42:59.903 828-1247/system_process V/WindowManager: addAppToken: AppWindowToken{1c4987a0 token=Token{279a08a3 ActivityRecord{9f5afd2 u0 ru.tabor.search/.modules.authorization.AuthorizationActivity t2593}}} to stack=1 task=2593 at 0 02-03 18:42:59.919 828-891/system_process V/WindowManager: Adding window Window{1735e91b u0 Starting ru.tabor.search} at 4 of 8 (after Window{2ab6bf53 u0 com.cleanmaster.mguard/com.keniu.security.main.MainActivity}) 02-03 18:43:19.288 828-1673/system_process I/ActivityManager: Start proc 21366:ru.tabor.search/u0a89 for activity ru.tabor.search/.modules.authorization.AuthorizationActivity 标记之外，则会收到此错误。

<head></head>

替换头标签中的那些立即解决了它。

<html>  
  <head>
    <title>Awesome graph</title>
  </head>
  <script type="text/javascript" src="jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<body>...
相关问题
最新问题