12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- 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.
|