Блог

Главная - Вопросы по программированию - amCharts диаграмма Ганта со временем неправильной загрузки данных

amCharts диаграмма Ганта со временем неправильной загрузки данных

#javascript #jquery #charts #amcharts

#javascript #jquery #Диаграммы #amcharts

Вопрос:

Я пытаюсь построить диаграмму Ганта с датой / временем по оси X, код, который у меня есть, выглядит примерно так:

  AmCharts.useUTC = true;
    var chart = AmCharts.makeChart( "user-pages", {
      "type": "gantt",
      "theme": "light",
      "marginRight": 70,
      "dataDateFormat": "DD-MM-YYYY HH:NN",
      "columnWidth": 0.5,
      "valueAxis": {
        "type": "date"
      },
      "brightnessStep": 7,
      "graph": {
        "fillAlphas": 1,
        "lineAlpha": 1,
        "lineColor": "#fff",
        "balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]"
      },
      "rotate": true,
      "categoryField": "category",
      "segmentsField": "segments",
      "colorField": "color",
      "startDateField": "start",
      "endDateField": "end",
      "dataProvider": [ {
        "category": "Module #1",
        "segments": [ {
          "start": AmCharts.stringToDate("2016-10-03T09:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-04T10:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "color": "#b9783f",
          "task": "Gathering requirements"
        }]
      }, {
        "category": "Module #2",
        "segments": [ {
          "start": AmCharts.stringToDate("2016-10-03T07:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T08:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "color": "#b9783f",
          "task": "Gathering requirements"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T13:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T14:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Producing specifications"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T15:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T16:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Development"
        } ]
      }, {
        "category": "Module #3",
        "segments": [ {
          "start": AmCharts.stringToDate("2016-10-03T09:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T10:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "color": "#b9783f",
          "task": "Gathering requirements"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T11:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T12:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Producing specifications"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T15:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T17:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Development"
        } ]
      }, {
        "category": "Module #4",
        "segments": [ {
          "start": AmCharts.stringToDate("2016-10-03T07:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T08:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "color": "#b9783f",
          "task": "Gathering requirements"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T13:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T14:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Producing specifications"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T15:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T16:00:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Development"
        } ]
      }, {
        "category": "Module #5",
        "segments": [ {
          "start": AmCharts.stringToDate("2016-10-03T09:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T10:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "color": "#b9783f",
          "task": "Gathering requirements"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T11:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T12:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Producing specifications"
        }, {
          "start": AmCharts.stringToDate("2016-10-03T15:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T17:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "task": "Development"
        } ]
      } ],
      "valueScrollbar": {
        "autoGridCount": true
      },
      "chartCursor": {
        "cursorColor": "#55bb76",
        "valueBalloonsEnabled": false,
        "cursorAlpha": 0,
        "valueLineAlpha": 0.5,
        "valueLineBalloonEnabled": true,
        "valueLineEnabled": true,
        "zoomable": false,
        "valueZoomable": true
      },
      "export": {
        "enabled": true
      }
    } );

Вы можете увидеть проблему здесь:
http://jsfiddle.net/28305m8g/1 /

Если я изменю сегмент первого на ту же дату:

 [ {
        "category": "Module #1",
        "segments": [ {
          "start": AmCharts.stringToDate("2016-10-03T09:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-04T10:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "color": "#b9783f",
          "task": "Gathering requirements"
        }]

Для:

 [ {
        "category": "Module #1",
        "segments": [ {
          "start": AmCharts.stringToDate("2016-10-03T09:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "end": AmCharts.stringToDate("2016-10-03T10:33:00 00:00", "DD-MM-YYYY HH:NN"),
          "color": "#b9783f",
          "task": "Gathering requirements"
        }]

Вы можете увидеть, как это работает ниже:
http://jsfiddle.net/28305m8g/2 /

Кто-нибудь знает, почему это происходит, и может помочь мне это исправить?

Ответ №1:

Вы вызываете AmCharts.stringToDate неправильно. Второй параметр — это формат строковой даты, которую функция пытается проанализировать в первом параметре. Ваши даты указаны в формате ГГГГ-ММ-ДД, а не ДД-ММ-ГГГГ. Как только вы исправите формат, диаграмма будет отображаться правильно. Пример: AmCharts.stringToDate("2016-10-03T09:33:00 00:00", "YYYY-MM-DD HH:NN")

Вот ваша обновленная скрипка: http://jsfiddle.net/28305m8g/3 /

Комментарии:

1. Большое спасибо xorspark, что решение сработало, у меня к вам быстрый вопрос, моя диаграмма при наведении на нее теперь выдает следующую ошибку в консоли: Uncaught TypeError: g.fixPrevious is not a functionshowGraphBalloon @ amcharts.js:211handleRollOver @ amcharts.js:204(anonymous function) @ amcharts.js:203 browser_adapter.js:93 EXCEPTION: TypeError: g.fixPrevious is not a function Вы знаете, что вызывает это?

2. Не могу сказать наверняка без скрипки, которая ее воспроизводит. Единственный раз, когда я видел подобную проблему, возникающую, — это если вы одновременно включаете js-файлы amcharts и ammap. Если у вас есть и диаграммы, и карты на одной странице, вы должны использовать ammap_amcharts_extension.js вместо того , чтобы ammap.js

3. Я использую оба ammap.js и amcharts на той же странице, да, но как только я использую ammap_amcharts_extensions.js вместо того , чтобы ammap.js Затем я сталкиваюсь со следующей ошибкой: amcharts.js:3 Uncaught TypeError: Cannot read property 'length' of undefined a.inherits.b.fire @ amcharts.js:3 handleReleaseOutside @ ammap_amcharts_extension.js:19 d.handleMouseUp @ amcharts.js:6

4. Исправлено, это было связано с моим вызовом export.min.js после ammap_amcharts_extension.js как только я изменил его, чтобы импортировать перед ним, он начал работать. Еще раз спасибо!