使用 dateAxisRenderer 线的 jqplot 无法渲染,有什么想法吗?

发布于 2024-12-01 09:49:54 字数 1858 浏览 1 评论 0原文

这段代码工作得很好:

在我看来:

<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”(如果与 此 jQPlot 站点) 并添加了 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.

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

This code works perfectly fine:

in my view:

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

And then my js:

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

When I changed my js(copied it from jqPlot site) so I could have dates included on my x axis only the grid shows without x axis or line (y axis is accurate and present):

The new js code that doesnt work:

$(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'}}]
    });
    });

Note I only changed the dates to 2011, renamed ID of a div to "chart1" (if compared to this jQPlot site) and added jqplot.dateAxisRenderer.min.js.

So now I have the following plugins included:

  • "jqplot.canvasTextRenderer.min.js"
  • "jqplot.canvasAxisLabelRenderer.min.js"
  • "jqplot.dateAxisRenderer.min.js"
  • "jqplot/jqplot.canvasAxisTickRenderer.min.js"
  • "jqplot/jquery.jqplot.min.js"

I am getting following JS errors:

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.

What am I doing wrong here? Any help would be greatly appreciated. I googled around for 2h without success.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

好多鱼好多余 2024-12-08 09:49:54

我创建了一个包含上面代码的纯 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 的问题。

您使用 ruby​​ on Rails 对其进行了标记,因此如果您从某些框架代码调用它并且它还加载其他内容,则可能顺序存在问题,因此更改它可能会有所帮助。

I created a plain html page containing your code above and it appears to work.

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

which produces the following output for me in firefox 3.6.22 on windows 7

output of jqplot code

I'm using jquery v1.5.1 so maybe update to the latest version and try again just in case.

I only needed to include the jquery.js, the jqplot.js and the dateAxisRenderer for this to work so also try removing the other renderers as i dont think you are using any options that need it in the code sample you provided.

Although this code works fine in isolation, i read an issue elsewhere about a problem with some browsers not loading loading everything in the correct order and needing the css to be loaded before the javascript.

You tagged this with ruby on rails so if you are calling this from some framework code and it loads other stuff as well, maybe there is an issue with the order so changing that around might help.

一场信仰旅途 2024-12-08 09:49:54

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

One possibility is that the jqPlot plugin files are loading before the jqPlot main plugin file is loading, causing the "undefined" error. I experienced your issue because I am using RequireJS to load dependencies asynchronously, and the jqPlot main plugin file is huge in comparison to the plugin files, so the plugin files loaded first.

泪眸﹌ 2024-12-08 09:49:54

我也经历过你的问题。脚本标签中是否有可能有两个“类型”属性?像这样:

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

I experienced your issue too. Can it be possible, that there are two "type" properties in script tag? Like this:

<script type="javascript" type="text/javascript" src="/jqplot/jquery.jqplot.js"></script>
谁许谁一生繁华 2024-12-08 09:49:54

在快速复制粘贴错误后,我注意到如果源链接位于 标记之外,我会收到此错误。

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

替换 head 标签中的内容即可立即解决。

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

After doing a quick copy-paste mistake, I noticed that I get this error if the source links are outside the <head></head> tags.

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

Replacing those in the head tags resolved it immediatly.

<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>...
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文