C3. js Как правильно загрузить локальный файл json - PullRequest
0 голосов
/ 26 апреля 2020

Я пытаюсь использовать 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]
}

Когда я делаю вышеизложенное, веб-страница отображает это:

enter image description here

Мне нужна помощь в том, как правильно загрузить данные из файла JSON в диаграмму. Спасибо за помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...