chart_combination.html 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <html>
  2. <head>
  3. <link href="/css/c3.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6. <div id="chart"></div>
  7. <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  8. <script src="/js/c3.js"></script>
  9. <script>
  10. var chart = c3.generate({
  11. data: {
  12. columns: [
  13. ['data1', 30, 20, 50, 40, 60, 50],
  14. ['data2', 200, 130, 90, 240, 130, 220],
  15. ['data3', 300, 200, 160, 400, 250, 250],
  16. ['data4', 200, 130, 90, 240, 130, 220],
  17. ['data5', 130, 120, 150, 140, 160, 150],
  18. ['data6', 90, 70, 20, 50, 60, 120],
  19. ],
  20. types: {
  21. data1: 'bar',
  22. data2: 'bar',
  23. data3: 'spline',
  24. data4: 'line',
  25. data5: 'bar',
  26. data6: 'area'
  27. },
  28. groups: [
  29. ['data1','data2']
  30. ]
  31. },
  32. axis: {
  33. x: {
  34. type: 'categorized'
  35. }
  36. }
  37. });
  38. </script>
  39. </body>
  40. </html>