amCharts не может отображать данные?

Я новичок в amCharts и javascript. Мой HTML файл выглядит следующим образом:amCharts не может отображать данные?

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="shortcut icon" href=""> 
    <title>chart created with amCharts | amCharts</title> 
    <meta name="description" content="chart created using amCharts live editor" /> 

    <!-- amCharts javascript sources --> 
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 
    <script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script> 

    <!-- amCharts javascript code --> 
    <script type="text/javascript"> 
     AmCharts.makeChart("chartdiv", { 
      "type": "serial", 
      "dataLoader": { 
       "url": "output.json", 
       "format": "json" 
      }, 
      "valueField": "count", 
      "titleField": "date" 
     }); 
    </script> 
</head> 

<body> 
    <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div> 
</body> 

</html>

Мой JSON файл:

[{ 
    "date": "2015-11-17", 
    "count": "1" 
}, { 
    "date": "2015-11-28", 
    "count": "1" 
}, { 
    "date": "2016-01-13", 
    "count": "1" 
}, { 
    "date": "2016-01-22", 
    "count": "1" 
}]

С помощью HTTP-сервера -o, Локальный хост открывает в браузере Chrome. http://127.0.0.1:8080/test2.html

test2.html и output.json находятся в том же каталоге

Я могу видеть из chromeconsole, он загружает файл JSon правильно.

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

источник

2016-12-02 ripudaman flora

В вашей диаграмме отсутствует несколько частей, которые вы можете найти в любой из демонстраций строк/столбцов на amCharts site. Вот что вам не хватает:

Вам не хватает массива graphs. Это требуется для последовательной диаграммы (похоже, вы начали с круговой диаграммы, которая совершенно иная). Каждый объект в массиве graphs содержит valueField.
Ваш код отсутствует categoryField.
Похоже, что у ваших данных есть даты, поэтому вам нужно создать categoryAxis и установить parseDates в true. Вы также захотите установить строку dataDateFormat на верхнем уровне конфигурации диаграммы, чтобы диаграмма умела правильно анализировать ваши даты во всех браузерах.

Предполагая, что вы хотите линейную диаграмму, вот голый минимум makeChart позвонить вам нужно для ваших данных:

AmCharts.makeChart("chartdiv", { 
     "type": "serial", 
     "dataLoader": { 
      "url": "output.json", 
      "format": "json" 
     }, 
     "graphs": [{ 
      "valueField": "count" 
     }], 
     "categoryField": "date", 
     "dataDateFormat": "YYYY-MM-DD", 
     "categoryAxis": { 
      "parseDates": true 
     } 
    });

Demo

источник

2016-12-02 19:37:03 xorspark

Спасибо. Да, я начал с круговой диаграммы, а затем пошел на линейную диаграмму: $ –

ответ

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