grid_x_lines.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. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  9. <script src="../js/c3.js"></script>
  10. <script>
  11. var chart = c3.generate({
  12. bindto: '#chart1',
  13. data: {
  14. columns: [
  15. ['data1', 30, 200, 100, 400, 150, 250]
  16. ],
  17. type: 'bar'
  18. },
  19. grid: {
  20. x: {
  21. show: true,
  22. lines: [{
  23. value: 2,
  24. text: 'Label 2',
  25. class: 'lineFor2'
  26. }]
  27. },
  28. y: {
  29. show: true,
  30. }
  31. }
  32. });
  33. var chart2 = c3.generate({
  34. bindto: '#chart2',
  35. data: {
  36. x : 'x',
  37. columns: [
  38. ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
  39. ['sample', 30, 200, 100, 400, 150]
  40. ],
  41. },
  42. axis : {
  43. x : {
  44. type : 'timeseries'
  45. }
  46. },
  47. grid: {
  48. x: {
  49. lines: [{
  50. value: '2013-01-04',
  51. text: '2013/01/04',
  52. class: 'lineFor20130104'
  53. }]
  54. },
  55. lines: {
  56. front: false
  57. }
  58. }
  59. });
  60. </script>
  61. </body>
  62. </html>