Я пытаюсь использовать C3. js для загрузки данных из файла json, хранящегося в том же локальном каталоге, что и веб-страница.
Перед тем, как выполнить вышеизложенное, я пытался сгенерировать диаграмму, используя самый простой c жесткий код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/lib/c3.css" rel="stylesheet">
</head>
<body>
<div id="chart"></div>
<script src="/lib/d3.js" charset="utf-8"></script>
<script src="/lib/c3.min.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['visits', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
}
}
});
</script>
</body>
</html>
Приведенный выше код не вызывает проблем. Однако, когда я хочу сгенерировать то же самое, но вместо этого использовать данные из файла JSON, ничего не отображается. Ниже показано, как я изменил код:
<body>
<div id="chart"></div>
<script src="/lib/d3.js" charset="utf-8"></script>
<script src="/lib/c3.min.js"></script>
<script>
var chart = c3.generate({
data: {
url: "/fake_data.json"
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
}
}
});
</script>
</body>
Файл json создается следующим образом:
{
"columns": ["Visits", 30, 200, 100, 400, 150, 250, 50, 100, 250]
}
Когда я делаю вышеизложенное, веб-страница отображает это:
Мне нужна помощь в том, как правильно загрузить данные из файла JSON в диаграмму. Спасибо за помощь!