Блог

Главная - Вопросы по программированию - Руководства по категориям не отображаются на диаграммах Amcharts

Руководства по категориям не отображаются на диаграммах Amcharts

#javascript #amcharts

#javascript #amcharts

Вопрос:

Я пытаюсь добавить вертикальные направляющие по оси категорий, чтобы показывать спортивные мероприятия на моей диаграмме. В моем json-файле есть переменная с именем UNIX_TIMESTAMP (start_time), которая является меткой времени Unix. Я использую это поле для отображения на моей оси категорий. Вот codepen, созданный с помощью моего кода для диаграммы: https://codepen.io/thomasdesaranno-r0629748/pen/jJrQgO

это пример моего файла JSON:

 {
    "id": "NULL",
    "bg": "NULL",
    "UNIX_TIMESTAMP(start_time)": 1546603542000,
    "duration": 30,
    "sport_type": "running",
    "average_hr": 60,
    "average_speed": 30,
    "calories": 496,
    "fat_percentage_of_calories": 36,
    "food": "NULL",
    "ci": "NULL",
    "emotion": "NULL"
}

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

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

1. Не могли бы вы, пожалуйста, обновить свой code pen и добавить рабочую диаграмму с данными json в DataLoader?

2. Он обновлен, но на самом деле диаграммы не отображаются, потому что у меня есть некоторые импортированные библиотеки, которые я не могу включить

3. можете ли вы просто добавить некоторые из ваших данных, чтобы мы могли воспроизвести вашу проблему?

4. Извините, я забыл. Готово

5. Спасибо за помощь

Ответ №1:

Руководства не могут быть созданы автоматически из dataProvider , но вы можете извлечь необходимые вам данные и создать руководства:

 var data = [/* your data */]
var guides = data
  .map(i => i['UNIX_TIMESTAMP(start_time)'])
  .filter(i => i !== "NULL")
  .map(timestamp => ({
    "date": timestamp,
    "color": "#0000ff",
    "lineColor": "#0000ff",
    "lineAlpha": 1,
    "label": new Date(timestamp),
    "labelRotation": 90,
    "inside": true
  }));

Теперь вы можете настроить руководства в конфигурации диаграммы:

 {
  // ...
  "guides": guides,
  // ...
}

Здесь я создал code pen в качестве ссылки.

Если вы хотите использовать dataLoader свойство для загрузки внешних данных для вашей диаграммы, вы можете использовать dataUpdated событие для создания направляющих и добавления их на диаграмму:

 {
  // ...
  "listeners": [{
    "event":"dataUpdated", 
    "method": function(event) {
      event.chart.guides = event.chart.dataProvider
        .map(i => i['UNIX_TIMESTAMP(start_time)'])
        .filter(i => i !== "NULL")
        .map(timestamp => ({
          "date": timestamp,
          "color": "#0000ff",
          "lineColor": "#0000ff",
          "lineAlpha": 1,
          "label": new Date(timestamp),
          "labelRotation": 90,
          "inside": true
      }));
      event.chart.validateNow();
    }
  }],
  // ...
}

Не забудьте вызвать chart.validateNow() , иначе на диаграмме не отображаются руководства.

Здесь я создал кодовый блок для dataLoader решения.

В официальных документах вы можете прочитать больше о руководствах и их конфигурации.