chart_pie.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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="http://d3js.org/d3.v4.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 : 'pie',
  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. },
  25. axis: {
  26. x: {
  27. label: 'Sepal.Width'
  28. },
  29. y: {
  30. label: 'Petal.Width'
  31. }
  32. }
  33. });
  34. setTimeout(function () {
  35. chart.load({
  36. columns: [
  37. ["setosa", 130],
  38. ]
  39. });
  40. }, 1000);
  41. setTimeout(function () {
  42. chart.unload({
  43. ids: 'virginica'
  44. });
  45. }, 2000);
  46. </script>
  47. </body>
  48. </html>