chart_donut.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. data: {
  12. columns: [
  13. // ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
  14. ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
  15. ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
  16. ["setosa", 30],
  17. // ["versicolor", 40],
  18. // ["virginica", 50],
  19. ],
  20. type : 'donut',
  21. onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
  22. onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
  23. onclick: function (d, i) { console.log("onclick", d, i, this); },
  24. order: null // set null to disable sort of data. desc is the default.
  25. },
  26. axis: {
  27. x: {
  28. label: 'Sepal.Width'
  29. },
  30. y: {
  31. label: 'Petal.Width'
  32. }
  33. },
  34. donut: {
  35. label: {
  36. // format: function (d, ratio) { return ""; }
  37. },
  38. title: "Iris Petal Width",
  39. width: 70,
  40. padAngle: .1
  41. }
  42. });
  43. setTimeout(function () {
  44. chart.load({
  45. columns: [
  46. ['data1', 30, 20, 50, 40, 60, 50],
  47. ]
  48. });
  49. }, 1000);
  50. setTimeout(function () {
  51. chart.unload({
  52. ids: 'virginica'
  53. });
  54. }, 2000);
  55. </script>
  56. </body>
  57. </html>