Форум

Proudmore · #1 (**permalink**) 13.12.2015, 18:32

Здравствуйте.
Стоит цель построить обновляемый график. Для рендеринга графика принято решение использовать http://c3js.org/
Теперь ближе к сабжу.
Попытался рассмотреть у себя на локалхосте примеры, но ничего не вышло.
Я скачал все требуемые файлы, подключил их в head страницы, но ничего не происходит.. Я интуитивно чувствую, что ответ донельзя банален, но сделать ничего не могу. Направьте в нужную сторону, пожалуйста.

Proudmore · #2 (**permalink**) 13.12.2015, 18:56

Попробую конкретизировать
Вот код страницы.
Код внутри chart.js эквивалентен указанному в scipt

<html>
<head>
    <meta charset="utf-8">
	<link rel="stylesheet" href="/js/c3.css" type="text/css">
      	<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript src="/js/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript src="/js/c3.min.js"></script>
	<title>График</title>
</head>
</body>
<div id="chart"></div>
<script>
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100]
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
}, 2000);
<script type="text/javascript src="/js/chart.js"></script>
</script>
</body>
</html>

Rise · #3 (**permalink**) 13.12.2015, 19:03

Proudmore, видишь подсветка у src в строках 6 и 7 отличается от строки 5 подумай почему)

рони · #4 (**permalink**) 13.12.2015, 19:10

Proudmore,
посмотрите существуют ли скрипты по указанным путям в ваших примерах

<html>
  <head>
    <link href="/css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h3>Zerobased</h3>
    <div id="chart1"></div>
    <h3>Not zerobased because of axis.y.min</h3>
    <div id="chart2"></div>
    <h3>Zerobased</h3>
    <div id="chart3"></div>
    <h3>Not zerobased because of axis.y.min</h3>
    <div id="chart4"></div>
    <h3>+/- vaulues</h3>
    <div id="chart5"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://c3js.org/js/c3.min-12912fb6.js"></script>
    <script>

      var chart1 = c3.generate({
        bindto: '#chart1',
        data: {
          columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
          ],
          type: 'area'
        }
      });

      var chart2 = c3.generate({
        bindto: '#chart2',
        data: {
          columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
          ],
          type: 'area'
        },
        axis: {
          y: {
            min: 100,
          }
        },
      });

      var chart3 = c3.generate({
        bindto: '#chart3',
        data: {
          columns: [
            ['data1', -300, -350, -300, 0, 0, 0],
            ['data2', -130, -100, -140, -200, -150, -50]
          ],
          type: 'area'
        }
      });

      var chart4 = c3.generate({
        bindto: '#chart4',
        data: {
          columns: [
            ['data1', -300, -350, -300, 0, 0, 0],
            ['data2', -130, -100, -140, -200, -150, -50]
          ],
          type: 'area'
        },
        axis: {
          y: {
            max: -100,
          }
        }
      });

      var chart5 = c3.generate({
        bindto: '#chart5',
        data: {
          columns: [
            ['data1', -300, 350, -300, 0, 0, 0],
            ['data2', -130, -100, 140, -200, 150, -50]
          ],
          type: 'area'
        }
      });

    </script>
  </body>
</html>

Proudmore · #5 (**permalink**) 13.12.2015, 19:44

рони,
Проверил, все пути верны. Копи-паст вашего кода показал ровно тот же результат, что и тут.
Rise, спасибо, исправил.

рони · #6 (**permalink**) 13.12.2015, 19:53

Proudmore,
здесь код работает?

рони · #7 (**permalink**) 13.12.2015, 19:57

Proudmore,
скачать zip здесь https://github.com/masayuki0812/c3
заменить в каталоге js скрипты на полноценные версии из корня или поправить пути в файлах примера -- это если не сработают примеры из zip сразу.

Proudmore · #8 (**permalink**) 13.12.2015, 20:12

рони,
здесь работает, да.

Proudmore · #9 (**permalink**) 13.12.2015, 21:04

Я не знаю, что произошло, но сейчас все работает. Скорее всего, проблема была в файлах. Рони, спасибо.

Форум

Справочник

Discord чат

Курсы javascript