jqplot с использованием строки dateAxisRenderer не рендерит, есть идеи почему? - PullRequest
Новая
       28

jqplot с использованием строки dateAxisRenderer не рендерит, есть идеи почему?

3 голосов
/ 25 августа 2011

Этот код прекрасно работает:

на мой взгляд: 

<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 в "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 часа.

Ответы [ 4 ]

1 голос
/ 02 октября 2012

Одна из возможностей заключается в том, что файлы плагина jqPlot загружаются до загрузки файла основного плагина jqPlot, что приводит к ошибке «undefined».Я столкнулся с вашей проблемой, потому что я использую RequireJS для асинхронной загрузки зависимостей, а основной файл плагина jqPlot огромен по сравнению с файлами плагинов, поэтому файлы плагинов загружаются первыми.

1 голос
/ 28 мая 2014

Я тоже столкнулся с твоей проблемой.Возможно ли, что в теге script есть два свойства типа?Как это: 

<script type="javascript" type="text/javascript" src="/jqplot/jquery.jqplot.js"></script>
1 голос
/ 17 сентября 2011

Я создал простую 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>

, который выдает мне следующий вывод в Firefox 3.6.22 для Windows 7

output of jqplot code

Я использую jquery v1.5.1, так что, возможно, обновитесь до последней версии и попробуйте еще раз на всякий случай.

Мне нужно было только включить jquery.js, jqplot.js и dateAxisRenderer, чтобы это работало, поэтому также попробуйте удалить другие средства визуализации, так как я не думаю, что вы используете какие-либо параметры, которые нужны в примере кодаВы предоставили.

Хотя этот код отлично работает в отдельности, я читал проблему в другом месте о проблеме с некоторыми браузерами, не загружающими загрузку всего в правильном порядке и нуждающимися в загрузке css перед javascript.

Вы пометили это как ruby ​​на рельсах, так что если вы вызываете это из какого-то фреймворкового кода, и он загружает и другие вещи, возможно, есть проблема с порядком, поэтому изменение порядка может помочь.

0 голосов
/ 03 февраля 2016

После быстрой ошибки копирования и вставки я заметил, что я получаю эту ошибку, если исходные ссылки находятся за пределами тегов <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>...

Замена этих тегов в заголовке немедленно разрешает эту проблему.

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