api_category.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  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. <div id="message"></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. data: {
  13. x: 'x',
  14. columns: [
  15. ['x', '1e-3', '1e-2', '1'],
  16. ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
  17. ]
  18. },
  19. axis: {
  20. x: {
  21. type: 'categorized'
  22. }
  23. }
  24. });
  25. setTimeout(function () {
  26. d3.select('#message').node().innerHTML = "chart.categories() =>" + chart.categories();
  27. }, 1000);
  28. setTimeout(function () {
  29. chart.categories(['updated 1', 'updated 2', 'updated 3', 'updated 4']);
  30. d3.select('#message').node().innerHTML = "";
  31. }, 2000);
  32. setTimeout(function () {
  33. d3.select('#message').node().innerHTML = "chart.category(1) =>" + chart.category(1);
  34. }, 3000);
  35. setTimeout(function () {
  36. chart.category(1, 'UPDATED 1');
  37. d3.select('#message').node().innerHTML = "";
  38. }, 4000);
  39. </script>
  40. </body>
  41. </html>