api_ygrid_lines.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="../css/c3.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. bindto: '#chart',
  12. data: {
  13. columns: [
  14. ['sample', 30, 200, 100, 400, 150, 250]
  15. ]
  16. },
  17. axis: {
  18. // rotated: true,
  19. },
  20. grid: {
  21. y: {
  22. lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
  23. }
  24. }
  25. });
  26. setTimeout(function () {
  27. chart.ygrids([{value: 130, text:'Label 130'}, {value: 50, text: 'Label 50'}]);
  28. }, 1000);
  29. setTimeout(function () {
  30. chart.ygrids([{value: 130, text:'Label 130', class: 'hoge'}]);
  31. }, 2000);
  32. setTimeout(function () {
  33. chart.ygrids.add([{value: 230, text:'Label 230', class: 'hoge'}]);
  34. }, 3000);
  35. setTimeout(function () {
  36. chart.ygrids.remove({value: 230});
  37. }, 4000);
  38. setTimeout(function () {
  39. chart.ygrids.remove({class: 'hoge'});
  40. }, 5000);
  41. </script>
  42. </body>
  43. </html>