mirror of
https://gitlab.com/freepascal.org/fpc/pas2js.git
synced 2025-04-05 05:27:47 +02:00
89 lines
3.1 KiB
ObjectPascal
89 lines
3.1 KiB
ObjectPascal
program democustompoints;
|
|
|
|
{$MODE OBJFPC}
|
|
{$MODESWITCH EXTERNALCLASS}
|
|
|
|
uses
|
|
JS,
|
|
Web,
|
|
SysUtils,
|
|
Math,
|
|
libjquery,
|
|
ChartJS;
|
|
|
|
function randomScalingFactor: integer;
|
|
begin
|
|
Result := RandomRange(-100, 100);
|
|
end;
|
|
|
|
var
|
|
config: TChartConfiguration;
|
|
lineChartData: TChartData;
|
|
dataset: TChartLineDataset;
|
|
customTooltips: TChartTooltipsCustomEventHandler;
|
|
begin
|
|
customTooltips :=
|
|
procedure(const tooltip: TChartTooltipModel)
|
|
var
|
|
canvas: TJSHTMLCanvasElement;
|
|
begin
|
|
canvas := TChartController(JSThis['_chart']).canvas;
|
|
JQuery(canvas).css('cursor', 'pointer');
|
|
JQuery('.chartjs-tooltip').css('opacity', 0);
|
|
if ((not Assigned(tooltip)) or (not Assigned(tooltip.dataPoints))) and
|
|
(tooltip.opacity = 0) then
|
|
Exit;
|
|
if tooltip.dataPoints_.Length > 0 then
|
|
tooltip.dataPoints_.forEach(
|
|
function(element: JSValue; index: NativeInt; arr: TJSArray): Boolean
|
|
var
|
|
tooltp: TJQuery;
|
|
dataPoint: TChartTooltipItem;
|
|
content: string;
|
|
begin
|
|
dataPoint := TChartTooltipItem(element);
|
|
content := TJSArray.new(dataPoint.xLabel, dataPoint.yLabel).join(': ');
|
|
tooltp := JQuery('#tooltip-' + IntToStr(dataPoint.datasetIndex));
|
|
tooltp.html(content);
|
|
tooltp.css('opacity', 1);
|
|
tooltp.css('top', FloatToStr(canvas.offsetTop + dataPoint.y) + 'px');
|
|
tooltp.css('left', FloatToStr(canvas.offsetLeft + dataPoint.x) + 'px');
|
|
end);
|
|
end;
|
|
lineChartData := TChartData.new;
|
|
lineChartData.datasets_ := TJSArray.new;
|
|
lineChartData.labels := ['January', 'February', 'March', 'April', 'May',
|
|
'June', 'July'];
|
|
dataset := TChartLineDataset.new;
|
|
dataset.label_ := 'My First dataset';
|
|
dataset.backgroundColor := 'rgba(255, 99, 132, 0.2)';
|
|
dataset.borderColor := 'rgb(255, 99, 132)';
|
|
dataset.pointBackgroundColor := 'rgb(255, 99, 132)';
|
|
dataset.data := [randomScalingFactor, randomScalingFactor,
|
|
randomScalingFactor, randomScalingFactor, randomScalingFactor,
|
|
randomScalingFactor, randomScalingFactor];
|
|
lineChartData.datasets_.push(dataset);
|
|
dataset := TChartLineDataset.new;
|
|
dataset.label_ := 'My Second dataset';
|
|
dataset.backgroundColor := 'rgba(54, 162, 235, 0.2)';
|
|
dataset.borderColor := 'rgb(54, 162, 235)';
|
|
dataset.pointBackgroundColor := 'rgb(54, 162, 235)';
|
|
dataset.data := [randomScalingFactor, randomScalingFactor,
|
|
randomScalingFactor, randomScalingFactor, randomScalingFactor,
|
|
randomScalingFactor, randomScalingFactor];
|
|
lineChartData.datasets_.push(dataset);
|
|
config := TChartConfiguration.new;
|
|
config.type_ := 'line';
|
|
config.data := lineChartData;
|
|
config.options := TChartOptions.new;
|
|
config.options.title := TChartTitleConfiguration.new;
|
|
config.options.title.display := False;
|
|
config.options.title.text := 'Chart.js - Custom Tooltips using Data Points';
|
|
config.options.tooltips := TChartTooltipsConfiguration.new;
|
|
config.options.tooltips.enabled := False;
|
|
config.options.tooltips.mode := 'index';
|
|
config.options.tooltips.intersect := False;
|
|
config.options.tooltips.custom := customTooltips;
|
|
TChart.new('chart1', config);
|
|
end.
|