legend.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="/css/c3.css">
  4. </head>
  5. <body>
  6. <div id="chart1"></div>
  7. <div id="chart2"></div>
  8. <div id="chart3"></div>
  9. <div id="chart4"></div>
  10. <div id="chart5"></div>
  11. <div id="chart6"></div>
  12. <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  13. <script src="/js/c3.js"></script>
  14. <script>
  15. var columns = [];
  16. for (var i = 0; i < 28; i++ ) {
  17. columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i];
  18. }
  19. c3.generate({
  20. bindto: '#chart1',
  21. data: {
  22. columns: columns,
  23. },
  24. });
  25. c3.generate({
  26. bindto: '#chart2',
  27. data: {
  28. columns: columns,
  29. },
  30. legend: {
  31. position: 'right'
  32. },
  33. });
  34. c3.generate({
  35. bindto: '#chart3',
  36. data: {
  37. columns: columns,
  38. },
  39. legend: {
  40. position: 'inset',
  41. },
  42. });
  43. c3.generate({
  44. bindto: '#chart4',
  45. data: {
  46. columns: columns,
  47. },
  48. axis: {
  49. rotated: true,
  50. },
  51. });
  52. c3.generate({
  53. bindto: '#chart5',
  54. data: {
  55. columns: columns,
  56. },
  57. legend: {
  58. position: 'right'
  59. },
  60. axis: {
  61. rotated: true,
  62. },
  63. });
  64. c3.generate({
  65. bindto: '#chart6',
  66. data: {
  67. columns: columns,
  68. },
  69. legend: {
  70. position: 'inset'
  71. },
  72. axis: {
  73. rotated: true,
  74. },
  75. });
  76. </script>
  77. </body>
  78. </html>