rotation.js 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. var gradient;
  2. var datasets = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'].map(function(style, y) {
  3. return {
  4. pointStyle: style,
  5. data: Array.apply(null, Array(17)).map(function(v, x) {
  6. return {x: x, y: 10 - y};
  7. })
  8. };
  9. });
  10. var angles = Array.apply(null, Array(17)).map(function(v, i) {
  11. return -180 + i * 22.5;
  12. });
  13. module.exports = {
  14. config: {
  15. type: 'bubble',
  16. data: {
  17. datasets: datasets
  18. },
  19. options: {
  20. responsive: false,
  21. legend: false,
  22. title: false,
  23. elements: {
  24. point: {
  25. rotation: angles,
  26. radius: 10,
  27. backgroundColor: function(context) {
  28. if (!gradient) {
  29. gradient = context.chart.ctx.createLinearGradient(0, 0, 512, 256);
  30. gradient.addColorStop(0, '#ff0000');
  31. gradient.addColorStop(1, '#0000ff');
  32. }
  33. return gradient;
  34. },
  35. borderColor: '#cccccc'
  36. }
  37. },
  38. layout: {
  39. padding: 20
  40. },
  41. scales: {
  42. xAxes: [{display: false}],
  43. yAxes: [{display: false}]
  44. }
  45. }
  46. },
  47. options: {
  48. canvas: {
  49. height: 256,
  50. width: 512
  51. }
  52. }
  53. };