point-style-image.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. var imageCanvas = document.createElement('canvas');
  2. var imageContext = imageCanvas.getContext('2d');
  3. imageCanvas.width = 40;
  4. imageCanvas.height = 40;
  5. imageContext.fillStyle = '#f00';
  6. imageContext.beginPath();
  7. imageContext.moveTo(20, 0);
  8. imageContext.lineTo(10, 40);
  9. imageContext.lineTo(20, 30);
  10. imageContext.closePath();
  11. imageContext.fill();
  12. imageContext.fillStyle = '#a00';
  13. imageContext.beginPath();
  14. imageContext.moveTo(20, 0);
  15. imageContext.lineTo(30, 40);
  16. imageContext.lineTo(20, 30);
  17. imageContext.closePath();
  18. imageContext.fill();
  19. module.exports = {
  20. config: {
  21. type: 'line',
  22. data: {
  23. labels: [0, 1, 2, 3, 4, 5, 6, 7],
  24. datasets: [{
  25. data: [0, 0, 0, 0, 0, 0, 0, 0],
  26. showLine: false
  27. }]
  28. },
  29. options: {
  30. responsive: false,
  31. legend: false,
  32. title: false,
  33. elements: {
  34. point: {
  35. pointStyle: imageCanvas,
  36. rotation: [0, 45, 90, 135, 180, 225, 270, 315]
  37. }
  38. },
  39. layout: {
  40. padding: 20
  41. },
  42. scales: {
  43. xAxes: [{display: false}],
  44. yAxes: [{display: false}]
  45. }
  46. }
  47. },
  48. options: {
  49. canvas: {
  50. height: 256,
  51. width: 512
  52. }
  53. }
  54. };