2
0

democustompoints.lpr 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. program democustompoints;
  2. {$MODE OBJFPC}
  3. {$MODESWITCH EXTERNALCLASS}
  4. uses
  5. JS,
  6. Web,
  7. SysUtils,
  8. Math,
  9. libjquery,
  10. ChartJS;
  11. function randomScalingFactor: integer;
  12. begin
  13. Result := RandomRange(-100, 100);
  14. end;
  15. var
  16. config: TChartConfiguration;
  17. lineChartData: TChartData;
  18. dataset: TChartLineDataset;
  19. customTooltips: TChartTooltipsCustomEventHandler;
  20. begin
  21. customTooltips :=
  22. procedure(const tooltip: TChartTooltipModel)
  23. var
  24. canvas: TJSHTMLCanvasElement;
  25. begin
  26. canvas := TChartController(JSThis['_chart']).canvas;
  27. JQuery(canvas).css('cursor', 'pointer');
  28. JQuery('.chartjs-tooltip').css('opacity', 0);
  29. if ((not Assigned(tooltip)) or (not Assigned(tooltip.dataPoints))) and
  30. (tooltip.opacity = 0) then
  31. Exit;
  32. if tooltip.dataPoints_.Length > 0 then
  33. tooltip.dataPoints_.forEach(
  34. function(element: JSValue; index: NativeInt; arr: TJSArray): Boolean
  35. var
  36. tooltp: TJQuery;
  37. dataPoint: TChartTooltipItem;
  38. content: string;
  39. begin
  40. dataPoint := TChartTooltipItem(element);
  41. content := TJSArray.new(dataPoint.xLabel, dataPoint.yLabel).join(': ');
  42. tooltp := JQuery('#tooltip-' + IntToStr(dataPoint.datasetIndex));
  43. tooltp.html(content);
  44. tooltp.css('opacity', 1);
  45. tooltp.css('top', FloatToStr(canvas.offsetTop + dataPoint.y) + 'px');
  46. tooltp.css('left', FloatToStr(canvas.offsetLeft + dataPoint.x) + 'px');
  47. end);
  48. end;
  49. lineChartData := TChartData.new;
  50. lineChartData.datasets_ := TJSArray.new;
  51. lineChartData.labels := ['January', 'February', 'March', 'April', 'May',
  52. 'June', 'July'];
  53. dataset := TChartLineDataset.new;
  54. dataset.label_ := 'My First dataset';
  55. dataset.backgroundColor := 'rgba(255, 99, 132, 0.2)';
  56. dataset.borderColor := 'rgb(255, 99, 132)';
  57. dataset.pointBackgroundColor := 'rgb(255, 99, 132)';
  58. dataset.data := [randomScalingFactor, randomScalingFactor,
  59. randomScalingFactor, randomScalingFactor, randomScalingFactor,
  60. randomScalingFactor, randomScalingFactor];
  61. lineChartData.datasets_.push(dataset);
  62. dataset := TChartLineDataset.new;
  63. dataset.label_ := 'My Second dataset';
  64. dataset.backgroundColor := 'rgba(54, 162, 235, 0.2)';
  65. dataset.borderColor := 'rgb(54, 162, 235)';
  66. dataset.pointBackgroundColor := 'rgb(54, 162, 235)';
  67. dataset.data := [randomScalingFactor, randomScalingFactor,
  68. randomScalingFactor, randomScalingFactor, randomScalingFactor,
  69. randomScalingFactor, randomScalingFactor];
  70. lineChartData.datasets_.push(dataset);
  71. config := TChartConfiguration.new;
  72. config.type_ := 'line';
  73. config.data := lineChartData;
  74. config.options := TChartOptions.new;
  75. config.options.title := TChartTitleConfiguration.new;
  76. config.options.title.display := False;
  77. config.options.title.text := 'Chart.js - Custom Tooltips using Data Points';
  78. config.options.tooltips := TChartTooltipsConfiguration.new;
  79. config.options.tooltips.enabled := False;
  80. config.options.tooltips.mode := 'index';
  81. config.options.tooltips.intersect := False;
  82. config.options.tooltips.custom := customTooltips;
  83. TChart.new('chart1', config);
  84. end.