axes_x_tick_rotate.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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="https://d3js.org/d3.v5.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, 200, 100, 400, 150, 250, 100, 600],
  14. ['data2', 50, 20, 10, 40, 15, 25],
  15. ]
  16. },
  17. axis: {
  18. // rotated: true,
  19. x: {
  20. tick: {
  21. format: function () { return "hogehogehogehogehoge"; },
  22. rotate: -30,
  23. },
  24. label: {
  25. text: 'Hogehoge',
  26. position: 'outer-center'
  27. },
  28. },
  29. y: {
  30. label: {
  31. text: 'Y Label',
  32. position: 'outer-middle'
  33. }
  34. }
  35. },
  36. subchart: {
  37. show: true
  38. }
  39. });
  40. setTimeout(function () {
  41. chart.load({
  42. columns: [
  43. // ['data1', 30, 200, 100, 400, 150, 250, 100, 400],
  44. ['data1', 1030, 2000, 1000, 1400, 1500, 1250, 1100, 140000],
  45. ]
  46. })
  47. }, 1000);
  48. </script>
  49. </body>
  50. </html>