subchart.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  10. <script src="/js/c3.js"></script>
  11. <script>
  12. var chart1 = c3.generate({
  13. bindto: '#chart1',
  14. data: {
  15. columns: [
  16. ['data1', 30, 200, 100, 400, 150, 250],
  17. ['data2', 50, 20, 10, 40, 15, 25]
  18. ],
  19. labels: true
  20. },
  21. subchart: {
  22. show: true
  23. },
  24. });
  25. var chart2 = c3.generate({
  26. bindto: '#chart2',
  27. data: {
  28. columns: [
  29. ['data1', 30, 200, 100, 400, 150, 250],
  30. ['data2', 50, 20, 10, 40, 15, 25]
  31. ],
  32. labels: true
  33. },
  34. subchart: {
  35. show: true
  36. },
  37. axis: {
  38. rotated: true
  39. }
  40. });
  41. var chart3 = c3.generate({
  42. bindto: '#chart3',
  43. data: {
  44. columns: [
  45. ['data1', 30, 200, 100, 400, 150, 250],
  46. ['data2', 50, 20, 10, 40, 15, 25]
  47. ],
  48. labels: true
  49. },
  50. axis: {
  51. x: {
  52. default: [3, 5]
  53. }
  54. },
  55. subchart: {
  56. show: true
  57. },
  58. });
  59. </script>
  60. </body>
  61. </html>