123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <html>
- <head>
- <link rel="stylesheet" type="text/css" href="/css/c3.css">
- </head>
- <body>
- <div id="chart"></div>
- <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
- <script src="/js/c3.js"></script>
- <script>
- var columns = [];
- for (var i = 0; i < 5; i++ ) {
- columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i];
- }
- var chart = c3.generate({
- data: {
- columns: columns,
- },
- axis: {
- x: {
- type: 'category'
- }
- }
- });
- setTimeout(function () {
- chart.legend.hide();
- }, 1000);
- setTimeout(function () {
- chart = c3.generate({
- data: {
- columns: columns,
- },
- axis: {
- x: {
- type: 'category'
- }
- },
- legend: {
- position: 'right'
- }
- });
- }, 2000);
- setTimeout(function () {
- chart.legend.hide();
- }, 3000);
- setTimeout(function () {
- chart = c3.generate({
- data: {
- columns: columns,
- },
- axis: {
- rotated: true
- }
- });
- }, 4000);
- setTimeout(function () {
- chart.legend.hide();
- }, 5000);
- setTimeout(function () {
- chart = c3.generate({
- data: {
- columns: columns,
- },
- legend: {
- position: 'right'
- },
- axis: {
- rotated: true
- }
- });
- }, 6000);
- setTimeout(function () {
- chart.legend.hide();
- }, 7000);
- setTimeout(function () {
- chart = c3.generate({
- data: {
- columns: columns,
- },
- legend: {
- show: false
- }
- });
- }, 8000);
- setTimeout(function () {
- chart.legend.show();
- }, 9000);
- setTimeout(function () {
- chart = c3.generate({
- data: {
- columns: columns,
- },
- legend: {
- show: false
- },
- axis: {
- rotated: true
- }
- });
- }, 10000);
- setTimeout(function () {
- chart.legend.show();
- }, 11000);
- setTimeout(function () {
- chart = c3.generate({
- data: {
- columns: columns,
- },
- legend: {
- position: 'right',
- show: false
- }
- });
- }, 12000);
- setTimeout(function () {
- chart.legend.show();
- }, 13000);
- </script>
- </body>
- </html>
|