axes_padding.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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. <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  9. <script src="/js/c3.js"></script>
  10. <script>
  11. var chart1 = c3.generate({
  12. bindto: '#chart1',
  13. data: {
  14. columns: [
  15. ['data1', 30, 200, 100, 400, 150, 250],
  16. ['data2', 300, 2000, 1000, 4000, 1500, 2500],
  17. ],
  18. axes: {
  19. data2: 'y2'
  20. }
  21. },
  22. axis: {
  23. y: {
  24. padding: {
  25. top: 0.1,
  26. bottom: 0.1,
  27. unit: 'ratio'
  28. }
  29. },
  30. y2: {
  31. show: true,
  32. padding: {
  33. top: 200,
  34. bottom: 200,
  35. }
  36. }
  37. }
  38. });
  39. var chart2 = c3.generate({
  40. bindto: '#chart2',
  41. data: {
  42. columns: [
  43. ['data1', 3000, 20000, 10000, 40000, 15000, 25000],
  44. ],
  45. },
  46. axis: {
  47. y: {
  48. padding: {
  49. top: 0.1,
  50. bottom: 0.1,
  51. unit: 'ratio'
  52. }
  53. }
  54. }
  55. });
  56. </script>
  57. </body>
  58. </html>