Steema是全球領先的圖表類控件公司，總部設在西班牙的巴塞羅那附近，Steema公司的VCL圖表報表控件在全球擁有極高知名度。TeeChart可以在微軟的Visual Studio、Office和.NET以及Java和PHP開發平臺中使用，也可以作為本地Javascript-HTML5使用。

TeeChart Pro VCL/FMX是一款支持RAD Studio，Delphi和C ++ Builder以及FireMonkey的圖表制作工具。它提供了數百種用于可視化的2D、3D圖形樣式、56種數學、統計和金融函數，以及不限數量的坐標軸和30種調色板組件。

點擊立即下載TeeChart Pro VCL/FMX<

本文主要展示使用TeeChart導出到HTML5或Javascript選項，在HTML5 Canvas上創建本地靜態或實時瀏覽器圖表的過程。

您可能已經開發了一個桌面應用程序，并要求將報表圖表發布到網頁上。本文回顧了TeeChart為瀏覽器頁面創建Javascript的選項相關內容。

靜態HTML5導出

該選項創建一個Javascript低級呈現指令序列，以相同的方式再現基于桌面的圖表。要運行導出，首先在項目中添加一個uses:

uses VCLTee.TeeHTML5Canvas;

然后添加以下代碼以運行導出：

procedure TForm1.Button2Click(Sender: TObject);
var exporter: THTML5ExportFormat;
begin
//HTML5 Canvas fixed graphic
exporter:=THTML5ExportFormat.Create;
TeeSaveToHTML5File(Chart1,AppDir + 'myoutput\1_HTML5_Canvas_Chart.htm', DesWidth, DesHeight);
exporter.Width:=DesWidth;
exporter.Height:=DesHeight;
exporter.Panel:=Chart1;
Memo1.Lines:=exporter.HTML5;
end;

右側為導出輸出腳本

導出創建 HTML 頁面腳本和 Javascript 代碼行，它們逐行呈現指令以在 HTML5 Canvas 上繪制每個圖表元素。

例如：

function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(240,240,240)";
ctx.fillRect(0, 0, 1500, 700);
var gradient1 = ctx.createLinearGradient(0, 0, 0, 701);
gradient1.addColorStop(0,"rgb(234,234,234)");
gradient1.addColorStop(1,"rgb(255,255,255)");
ctx.fillStyle=gradient1;
ctx.fillRect(0, 0, 1501, 701);
ctx.strokeStyle = "rgb(0,0,0)";
ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(255,255,255)";
ctx.lineWidth = 1;
ctx.beginPath();
}

此代碼創建的圖表表現為靜態圖像，雖然可以添加更多自定義代碼以向圖像添加注釋，但我們建議使用以下替代導出方法來實現這一點。

Javascript 導出為實時圖表

并非所有系列類型都支持此 TeeChart 導出選項，但在支持的情況下會在瀏覽器頁面上提供完全動態和交互式的圖表。

支持的系列類型：

線、面積、條形圖、餅圖、點、環狀、氣泡、蠟燭圖、甘特圖、ColorGrid、Surface 3D、地圖。

與 TeeChart HTML5 導出不同，Javascript 導出使用 TeeChart 自己的 Javascript 庫。導出創建使用庫和創建基于 Delphi 圖表的再現所需的代碼行。要運行導出，請先向您的項目添加一個uses：

uses VCLTee.TeeJavascript

將以下代碼放入按鈕中：

var exporter: TJavascriptExportFormat;
CustCodeStr : TStringlist;
srcLinks : TStrings;
begin
//Javascript - "live" chart export.
exporter:=TJavascriptExportFormat.Create;

exporter.Width := DesiredWidth;
exporter.Height := DesiredHeight;

exporter.SaveToFile(Chart1,AppDir + 'myoutput\2_Chartfromcode.htm');

這將創建以下類型的輸出，您可以選擇將導出設置為完整的 html 頁面或作為具有多個元素的頁面的一部分。

<title>Chart1</title>
<script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">
var Chart1;
function draw() {
Chart1=new Tee.Chart("Canvas1");
Chart1.panel.format.fill="#F0F0F0";
Chart1.panel.format.round.x=0;
Chart1.panel.format.round.y=0;
Chart1.panel.format.stroke.fill="";
Chart1.panel.format.stroke.cap="round";
Chart1.panel.format.gradient.colors=["#EAEAEA","#EAEAEA","#FFFFFF"];
Chart1.panel.format.gradient.stops=[0,0.5,1];
Chart1.panel.format.gradient.direction="topbottom";
Chart1.panel.format.gradient.visible=true;
Chart1.panel.margins.left=3;
Chart1.panel.margins.right=3;

請注意對teechart.js 的腳本引用。這是可供您使用的 TeeChart javascript 庫，用于在 HTML5 Canvas 上呈現圖表。頁面上的圖表可縮放、可滾動、可以接收新數據并可以響應事件。

自定義圖表

下面是一個示例，說明如何向圖表添加修改、更改圖表主題、標題、字體或在圖表本身上添加內容。在這里，我們在導出之前向已解析的 Javascript 代碼添加一些自定義行，這里使用 Memo 組件將一些額外的參考行與對 javascript 函數的調用結合起來。

//add some modifications
CustCodeStr := TStringlist.Create;
CustCodeStr.Add(' addFeatures('+exporter.ChartName+');');
exporter.CustomCode := CustCodeStr;

在這里，添加了對 javascript 代碼單元 jutils.js 的引用，然后保存到文件中。

//add some source links
With Memo3 do
Begin
Lines := exporter.JScript;
Lines.Insert(6,'<script src="jutils.js" type="text/javascript"></script>');
Lines.Insert(6,'<script src="'+exporter.SourceScriptPath+'/teechart-animations.js" type="text/javascript"></script>');
Lines.Insert(6,'<script src="'+exporter.SourceScriptPath+'/teechart-extras.js" type="text/javascript"></script>');
Lines.SaveToFile(AppDir + 'myoutput\3_Chart_JScript_mods.htm');
End;

jutils 的 addFeatures 方法包括我們希望進行的修改。

例如：

function addFeatures(aChart) {
aChart.applyTheme("minimal");

//turn off marks
aChart.series.items[0].marks.visible = false;

//animation
animation=new Tee.SeriesAnimation();
animation.duration=2000;
animation.kind="each";
fadeAnimation=new Tee.FadeAnimation();
fadeAnimation.duration=500;
fadeAnimation.fade.series=true;
fadeAnimation.fade.marks=true;
animation.mode = "linear";
fadeAnimation.mode = "linear";
animation.items.push(fadeAnimation);

animation.animate(aChart);

//tooltip
tip=new Tee.ToolTip(aChart);
tip.render="dom";
tip.autoHide=true;
tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:1px; z-index:1000;";

aChart.tools.add(tip);
tip.onhide=function() { scaling=0; poindex=-1; }
tip.ongettext=function( tool, text, series, index) {
var s = '<font face="verdana" color="black" size="1"><strong>'+ series.title+'</strong></font>';
s = s + '<br/><font face="verdana" color="darkblue" size="1">Series point: <strong>'+ index.toFixed(0)+'</strong></font>';
s = s +'<br/><font face="verdana" color="red" size="1">Value: '+series.data.values[index].toFixed(2)+'</font>';
return s;
}
}

圖表的輸出添加了一次加載時間、動畫和標記提示。結果出來是這樣的：

以上內容便是如何使用TeeChart導出到HTML5或Javascript選項，在HTML5 Canvas上創建本地靜態或實時瀏覽器圖表的過程。

如果您有任何問題需了解詳情，請聯系

想要了解TeeChart Pro VCL/FMX 報價信息的朋友，歡迎咨詢。

加入官方社群740060302，歡迎相互交流