使用TeeChart的導出到HTML5和/或Javascript選項，在HTML5 Canvas上創建本地靜態或實時瀏覽器圖表。

本文源代碼來自：//github.com/Steema/TeeChart-VCL-samples/tree/master/JScriptExport

導出靜態HTML5

這個選項創建了一個Javascript的低級渲染指令序列，以相同的方式再現了基于桌面的圖表。要運行一個輸出，首先要在你的項目中添加一個用途。

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畫布上繪制每個圖表元素。
例子：

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();
}

支持的系列類型：線形、區域、條形、餅形、點形、甜甜圈、泡沫、蠟燭、甘特圖、彩網、表面3D、地圖。

與TeeChart HTML5導出不同，Javascript導出使用TeeChart自己的Javascript庫（見//steema.com/product/html5）。導出會創建必要的代碼行，以使用該庫并創建基于Delphi的圖表的復制品。要運行一個導出，首先要在你的項目中添加一個使用。

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');

<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; 

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

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

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;

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;
  }
}