| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <html>
- <head>
- <link href="../css/c3.css" rel="stylesheet" type="text/css">
- </head>
- <body>
- <div id="chart"></div>
- <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
- <script src="../js/c3.js"></script>
- <script>
- var axis_x_type = 'category',
- axis_rotated = false;
- var generate = function () { return c3.generate({
- data: {
- columns: [
- ['data1', 30, 200, 200, 400, 150, -250],
- ['data2', 130, -100, 100, 200, 150, 50],
- ['data3', 230, -200, 200, 0, 250, 250]
- ],
- type: 'bar',
- groups: [
- ['data1', 'data2']
- ]
- },
- axis: {
- x: {
- type: axis_x_type
- },
- rotated: axis_rotated
- },
- grid: {
- y: {
- lines: [{value:0}]
- }
- },
- }); }, chart = generate();
- function update1() {
- chart.groups([['data1', 'data2', 'data3']])
- }
- function update2() {
- chart.load({
- columns: [['data4', 100, 50, 150, -200, 300, -100]]
- });
- }
- function update3() {
- chart.groups([['data1', 'data2', 'data3', 'data4']])
- }
- setTimeout(update1, 1000);
- setTimeout(update2, 2000);
- setTimeout(update3, 3000);
- setTimeout(function () {
- axis_rotated = true;
- chart = generate();
- }, 4000);
- setTimeout(update1, 5000);
- setTimeout(update2, 6000);
- setTimeout(update3, 7000);
- setTimeout(function () {
- axis_x_type = '';
- axis_rotated = false;
- chart = generate();
- }, 8000);
- setTimeout(update1, 9000);
- setTimeout(update2, 10000);
- setTimeout(update3, 11000);
- setTimeout(function () {
- axis_x_type = '';
- axis_rotated = true;
- chart = generate();
- }, 12000);
- setTimeout(update1, 13000);
- setTimeout(update2, 14000);
- setTimeout(update3, 15000);
- </script>
- </body>
- </html>
|