2017-01-17 3 views
0

Я пытаюсь создать диаграмму с использованием Highcharts. Мой выход JSON - это обычный формат JSON, созданный json_encode() PHP. Вот мой выход JSON:Highcarts не загружает данные JSON

[["2015-07-13 16:41:05","3"],["2015-08-15 16:41:05","1"],["2015-09-18 16:41:05","4"],["2015-10-28 16:41:05","3"],["2015-11-20 16:41:05","1"],["2015-11-28 16:41:05","5"],["2015-12-13 16:41:05","1"],["2015-12-21 16:41:05","2"],["2015-12-24 16:41:05","1"],["2015-12-25 16:41:05","2"],["2015-12-28 16:41:05","1"],["2016-01-03 16:41:05","2"],["2016-01-09 16:41:05","4"],["2016-01-14 16:41:05","6"],["2016-01-17 16:41:05","3"],["2016-01-18 16:41:05","3"],["2016-01-20 16:41:05","2"],["2016-01-21 16:41:05","2"],["2016-01-22 16:41:05","2"],["2016-01-23 16:41:05","1"],["2016-01-24 16:41:05","5"],["2016-01-25 13:41:05","1"],["2016-01-25 16:41:00","1"],["2016-01-25 16:41:05","1"],["2016-01-27 16:41:05","1"],["2016-01-28 16:41:05","1"],["2016-01-29 16:41:05","1"],["2016-02-09 16:41:05","1"],["2016-02-10 16:41:05","2"],["2016-02-11 16:41:05","3"],["2016-02-15 16:41:05","2"],["2016-02-18 16:41:05","1"],["2016-02-21 16:41:05","1"],["2016-02-23 16:41:05","1"],["2016-02-24 16:41:05","1"],["2016-02-25 16:41:05","1"],["2016-02-26 16:41:05","1"],["2016-02-28 16:41:05","1"],["2016-03-01 16:41:05","1"],["2016-03-02 16:41:05","1"],["2016-03-05 16:41:05","1"],["2016-03-12 16:41:05","1"],["2016-03-21 16:41:05","1"],["2016-04-25 16:41:05","1"],["2016-05-05 16:41:05","2"],["2016-05-11 16:41:05","1"],["2016-05-12 16:41:05","1"],["2016-05-24 16:41:05","1"],["2016-05-25 16:41:05","1"],["2016-06-01 16:41:05","1"],["2016-06-12 16:41:05","1"],["2016-06-25 10:41:05","1"],["2016-06-25 16:41:05","1"],["2016-07-01 10:41:05","1"],["2016-07-01 16:41:05","1"],["2016-07-02 16:41:05","1"],["2016-07-25 16:21:05","1"],["2016-07-25 16:41:05","1"],["2016-08-13 16:41:05","1"],["2016-08-28 16:41:05","1"],["2016-09-20 16:41:05","3"],["2016-09-29 16:41:05","2"],["2016-10-01 14:20:18","1"],["2016-10-09 14:20:18","1"],["2016-10-10 14:20:18","1"],["2016-10-28 14:20:18","2"],["2016-10-30 14:20:18","2"],["2016-11-01 13:44:29","1"],["2016-11-06 08:26:18","2"],["2016-11-10 13:44:29","1"],["2016-11-13 13:44:29","2"],["2016-11-14 19:13:42","4"],["2016-11-15 23:27:39","3"],["2016-12-06 19:04:06","3"],["2016-12-08 10:49:28","3"],["2016-12-10 23:01:44","1"],["2016-12-14 21:27:44","1"],["2016-12-15 23:27:44","2"],["2016-12-15 23:27:53","3"],["2016-12-18 18:06:28","1"],["2016-12-21 20:06:28","3"],["2016-12-23 20:06:20","5"],["2016-12-29 20:18:18","3"],["2017-01-03 20:06:32","3"]] 

Но Highcarts не загружает данные в таблице. URL, вывод и данные настроены. Запрос возвращает 200, и данные можно загружать регулярно, поскольку я проверил его AJAX. Вот моя функция Highchart. Обратите внимание, что я получил несколько отчетов в своем заявлении. Именно поэтому я указал функцию cartFilling():

function cartFilling() { 
    var url = 'components/com_product/views/reports/callback.php?callback=cart-filling&date='+date_scope; 
    jQuery.getJSON(url, function (data) { 
     Highcharts.chart('cartFilling', { 
      chart: { 
       zoomType: 'x' 
      }, 
      title: { 
       text: 'Shopping Cart Filling Actions' 
      }, 
      subtitle: { 
       text: document.ontouchstart === undefined ? 
         'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' 
      }, 
      xAxis: { 
       type: 'datetime' 
      }, 
      yAxis: { 
       title: { 
        text: 'Carts Filled' 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      plotOptions: { 
       area: { 
        fillColor: { 
         linearGradient: { 
          x1: 0, 
          y1: 0, 
          x2: 0, 
          y2: 1 
         }, 
         stops: [ 
          [0, Highcharts.getOptions().colors[0]], 
          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
         ] 
        }, 
        marker: { 
         radius: 2 
        }, 
        lineWidth: 1, 
        states: { 
         hover: { 
          lineWidth: 1 
         } 
        }, 
        threshold: null 
       } 
      }, 

      series: [{ 
       type: 'area', 
       name: 'Cart Filling', 
       data: data 
      }] 
     }); 
    }); 
} 

Любая помощь очень ценится.

+0

Вам нужно проанализировать строку даты на метку javascript. Вместо этого «2015-07-13 16:41:05» вам понадобится sth like this 1436798465000. Используйте новую дату («2015-07-13 16:41:05»). GetTime(), чтобы проанализировать ваш json. – morganfree

ответ

0

Ваше решение прекрасно работает, вам просто нужно переписать массив данных.

Вместо этого:

["2015-07-13 16:41:05", "3"] 

Используйте это:

[Date.UTC(2015,6,13,16,41,5), 3] 

Пожалуйста, обратите внимание, что в функции Date.UTC 0 = январь, 1 = февраль и т.д.

http://jsfiddle.net/dpegbt7t/

+0

Он все еще не работает. Действительным форматом JSON является [«Date.UTC (2015,6,13,16,41,5)», «3»]. Я попробовал это, но бесполезно. Также я удалил цитаты, чтобы они сказали: [Date.UTC (2015,6,13,16,41,5), 3]. Это тоже не сработало. Как вы думаете? –

+0

Я использовал HighCharts 5.0.7 с jQuery 1.8.2, это сработало для меня. http://www.highcharts.com/demo/spline-irregular-time Для HighChart требуется тип номера для второго элемента массива. – Daniel

+0

Добавленный тип: 'number' to yAxis, но бесполезный. У меня возникла проблема с извлечением данных из-за типа данных, которые не были JSON. Кроме того, дата была проблемой. Таким образом, я не мог видеть, что диаграмма загружена вообще. Но теперь я сделал несколько исправлений. Хотя он не работает, но, по крайней мере, теперь я вижу пустую диаграмму. –

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