2016-10-19 3 views
1

Привет я пытаюсь создать простую диаграмму линии в jqplot с датой в оси х и значения в оси у все работает нормально, но график не рисуется правильно мой код нижеjqplot графике с датой

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
<head> 
    <title>Chart</title> 
    <meta charset="UTF-8"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> 
    <script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script> 
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script> 
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script> 
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script> 
</head> 
<body> 
    <div id="test_chart" style="width:880px; height:350px;margin-top: 30px;"></div> 
    <script> 
     $.jqplot ('test_chart',[[10,20,12]], 
     { 
     title: 'Example', 
      axesDefaults: { 
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
      }, 
      seriesDefaults: { 
      showMarker:true, 
      pointLabels: { show:true } , 
      rendererOptions: { 
      smooth: true 
      } 
      }, 
     axes: { 
       xaxis: { 
         renderer:$.jqplot.DateAxisRenderer, 
         tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
         tickOptions: 
          { 
         angle: -90, 
         formatString:'%d-%m-%Y' 
          },      
         label: 'Date', 
         ticks : ['2016-10-01','2016-10-02','2016-10-03'], 
         pad:2 
         }, 
       yaxis: { 
       label: 'value', 
       ticks : ['0','5','10','15','20','25','30','35']     
       } 
       }        
     }); 
     </script> 
</body>  
</html>  

Пожалуйста, наставит меня нарисовать график, используя jqplot

ответ

2

Прежде всего ...
чтобы воссоздать эту проблему на CodePen, я должен был использовать библиотеки из cdnjs.com, потому что ничего не происходит, кроме красных линий в консоли.

Так что, возможно, вы должны использовать их тоже (!).
Обратите внимание, что я также использовал последние jQuery и jQuery-UI.

Только тогда я увидел фон графика ... Но без какой-либо строки или чего-то еще.

Итак, глядя на некоторые examples here, я обнаружил, что вы абсолютно неправы на пути к предоставлению данных зверю.

Ваш входные данные:

$.jqplot ('test_chart',[[10,20,12]], 

И что нужно, это:

var arr = [['2016-10-01',10],['2016-10-02',20],['2016-10-03',12]]; 

$.jqplot ('test_chart',[arr], 

ИЛИ (Если вы действительно не нравится, чтобы определить данные в массиве первый ...) :

$.jqplot ('test_chart',[[['2016-10-01',10],['2016-10-02',20],['2016-10-03',12]]], 

Вы заметили количество кронштейнов?
Кроме того, вы заметили, что каждое значение оси X связано с значением оси Y в этом массиве?

Это было Ваш главный вопрос.
Плюс нечетные cdns и недостающие $(document).ready({ обертка.

Итак, посмотрим на ваш рабочий граф в this codePen
И весело ploting графики ...
;)

Смежные вопросы