Ruby on rails 3 使用dateAxisRenderer行的jqplot不'；不渲染，有什么想法吗？为什么？_Ruby On Rails 3_Jquery Plugins_Jqplot

Ruby on rails 3 使用dateAxisRenderer行的jqplot不'；不渲染，有什么想法吗？为什么？

ruby-on-rails-3 jquery-plugins

Ruby on rails 3 使用dateAxisRenderer行的jqplot不'；不渲染，有什么想法吗？为什么？,ruby-on-rails-3,jquery-plugins,jqplot,Ruby On Rails 3,Jquery Plugins,Jqplot,这段代码运行得非常好：我认为： <div id="chart1"></div> 当我更改我的js（从中复制）以便在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', [

这段代码运行得非常好：

我认为：

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

当我更改我的js（从中复制）以便在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”（如果与进行比较），并添加了jqplot.dateAxisRenderer.min.js

现在我有了以下插件：

“jqplot.canvasTextRenderer.min.js”
“jqplot.canvasAxisLabelRenderer.min.js”
“jqplot.dateAxisRenderer.min.js”
“jqplot/jqplot.canvas.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.

我做错了什么？任何帮助都将不胜感激。我在谷歌上搜索了2个小时都没有成功

我创建了一个普通的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>


$（文档）.ready（函数（）{
变量行1=['2011-06-30 8:00AM'，4]，'2011-7-30 8:00AM'，6]；
变量plot2=$.jqplot（'chart1'，[line1]{
标题：“自定义日期轴”，
网格填充：{右：35}，
轴线：{
xaxis：{
渲染器：$.jqplot.DateAxisRenderer，
选项：{formatString:'%b%#d，%y'}，
min:‘2011年5月30日’，
间隔时间：“1个月”
}
},
系列：[{线宽：4，标记选项：{样式：'square'}]
});
});

它为我在Windows7上的Firefox3.6.22中生成以下输出

我使用的是jqueryv1.5.1，所以可能会更新到最新版本，然后再试一次以防万一

我只需要包含jquery.js、jqplot.js和dateAxisRenderer就可以了，所以也可以尝试删除其他渲染器，因为我认为您在提供的代码示例中没有使用任何需要它的选项

虽然这段代码单独运行很好，但我在别处读到一个问题，即一些浏览器没有按正确的顺序加载所有内容，并且需要在javascript之前加载css

您用ruby on rails标记了它，因此如果您从一些框架代码调用它，并且它也加载了其他东西，那么可能是顺序有问题，因此更改顺序可能会有所帮助。

一种可能是jqPlot插件文件在加载jqPlot主插件文件之前加载，导致“未定义”错误。我遇到了您的问题，因为我正在使用RequireJS异步加载依赖项，而jqPlot主插件文件与插件文件相比是巨大的，因此插件文件首先加载。

我也遇到了您的问题。脚本标记中是否可能有两个“类型”属性？像这样：

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

在执行快速复制粘贴错误后，我注意到如果源链接在

标记之外，就会出现此错误

<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>...


可怕的图形
...

更换头部标签上的标签立即解决了问题

<html>  
  <head>
    <title>Awesome graph</title>
  <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>
  </head>
<body>...


可怕的图形
...

<html>  
  <head>
    <title>Awesome graph</title>
  <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>
  </head>
<body>...