chart_donut.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334
  1. var chart = c3.generate({
  2. data: {
  3. columns: [
  4. ['data1', 30],
  5. ['data2', 120],
  6. ],
  7. type : 'donut',
  8. onclick: function (d, i) { console.log("onclick", d, i); },
  9. onmouseover: function (d, i) { console.log("onmouseover", d, i); },
  10. onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  11. },
  12. donut: {
  13. title: "Iris Petal Width"
  14. }
  15. });
  16. setTimeout(function () {
  17. chart.load({
  18. columns: [
  19. ["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],
  20. ["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],
  21. ["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],
  22. ]
  23. });
  24. }, 1500);
  25. setTimeout(function () {
  26. chart.unload({
  27. ids: 'data1'
  28. });
  29. chart.unload({
  30. ids: 'data2'
  31. });
  32. }, 2500);