0
Ich habe ein Diagramm mit C3.js erstellt.C3.js Ladefunktion funktioniert nicht
Es erzeugt Diagramm perfekt.
<!DOCTYPE html>
<html>
<head>
<title>D3</title>
<!-- Load c3.css -->
<link href="c3_library/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="d3_lib/d3.v3.min.js" charset="utf-8"></script>
<script src="c3_library/c3.min.js"></script>
<script src="jquery/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div id="chart1"></div>
<button onclick="loadData()">Load Data 2</button>
<script type="text/javascript">
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
xFormat: '%H:%M',
columns: [
['x', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43', '10:44', '10:45', '10:46', '10:47', '10:48', '10:49', '10:50', '10:51', '10:52'],
['User Logins', 0, 2, 0, 0, 0, 8, 0, 0, 0, 10, 0, 0, 0, 5, 0, 0]
]
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: true,
tick: {
format: '%H:%M'
}
}
}
});
function loadData() {
chart.load({
bindto: '#chart1',
data: {
x: 'x',
xFormat: '%H:%M',
columns: [
['x', '10:28', '10:29', '10:30', '10:31', '10:32', '10:33', '10:34', '10:35', '10:36', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43'],
['User Logins', 50, 2, 0, 2, 3, 4, 0, 0, 0, 10, 2, 0, 9, 5, 0, 0]
]
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: true,
tick: {
format: '%H:%M'
}
}
}
});
}
</script>
</body>
</html>Aber wenn Aufruf chart.load() Funktion ist es nicht das Diagramm zu ändern. Zeigt auch keinen Fehler an. Code-Snippet ist hier beigefügt. Hier habe ich ein Diagramm erstellt, das sowohl x- als auch y-Achsen-Datensätze verwendet.