Использование библиотеки C3.js
Здравствуйте.
Стоит цель построить обновляемый график. Для рендеринга графика принято решение использовать http://c3js.org/ Теперь ближе к сабжу. Попытался рассмотреть у себя на локалхосте примеры, но ничего не вышло. Я скачал все требуемые файлы, подключил их в head страницы, но ничего не происходит.. Я интуитивно чувствую, что ответ донельзя банален, но сделать ничего не могу. Направьте в нужную сторону, пожалуйста. |
Попробую конкретизировать
Вот код страницы. Код внутри 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>
|
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>
|
рони,
Проверил, все пути верны. Копи-паст вашего кода показал ровно тот же результат, что и тут. Rise, спасибо, исправил. |
Proudmore,
здесь код работает? |
Proudmore,
скачать zip здесь https://github.com/masayuki0812/c3 заменить в каталоге js скрипты на полноценные версии из корня или поправить пути в файлах примера -- это если не сработают примеры из zip сразу. |
рони,
здесь работает, да. |
Я не знаю, что произошло, но сейчас все работает. Скорее всего, проблема была в файлах. Рони, спасибо.
|
| Часовой пояс GMT +3, время: 14:35. |