bindto.html 989 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <html>
  2. <head>
  3. <link href="/css/c3.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6. <div id="chart1" style="height:300px;"></div>
  7. <div class="chart2" style="height:150px;"></div>
  8. <div class="chart3" style="height:150px;"></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', 130, 210, 120, 440, 250, 350]
  17. ]
  18. }
  19. });
  20. var chart2 = c3.generate({
  21. bindto: '.chart2',
  22. data: {
  23. columns: [
  24. ['data1', 30, 200, 100, 400, 150, 250]
  25. ]
  26. }
  27. });
  28. var chart3 = c3.generate({
  29. bindto: document.getElementsByClassName('chart3')[0],
  30. data: {
  31. columns: [
  32. ['data1', 30, 200, 100, 400, 150, 250]
  33. ]
  34. }
  35. });
  36. </script>
  37. </body>
  38. </html>