使用TeeChart的導(dǎo)出到HTML5和/或Javascript選項(xiàng)，在HTML5 Canvas上創(chuàng)建本地靜態(tài)或?qū)崟r(shí)瀏覽器圖表。

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

導(dǎo)出靜態(tài)HTML5

 這個(gè)選項(xiàng)創(chuàng)建了一個(gè)Javascript的低級(jí)渲染指令序列，以相同的方式再現(xiàn)了基于桌面的圖表。要運(yùn)行一個(gè)輸出，首先要在你的項(xiàng)目中添加一個(gè)用途。

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;

出口輸出腳本在右邊。
該輸出創(chuàng)建了HTML頁面腳本和Javascript代碼線，逐行渲染指令，在HTML5畫布上繪制每個(gè)圖表元素。
例子：

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

支持的系列類型：線形、區(qū)域、條形、餅形、點(diǎn)形、甜甜圈、泡沫、蠟燭、甘特圖、彩網(wǎng)、表面3D、地圖。

與TeeChart HTML5導(dǎo)出不同，Javascript導(dǎo)出使用TeeChart自己的Javascript庫（見//steema.com/product/html5）。導(dǎo)出會(huì)創(chuàng)建必要的代碼行，以使用該庫并創(chuàng)建基于Delphi的圖表的復(fù)制品。要運(yùn)行一個(gè)導(dǎo)出，首先要在你的項(xiàng)目中添加一個(gè)使用。

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; 

這里是一個(gè)如何為圖表添加修改的例子，可以改變圖表主題、標(biāo)題、字體，或者在圖表本身添加內(nèi)容。在這里，我們?cè)趯?dǎo)出前向解析的Javascript代碼添加一些自定義行，這里使用Memo組件將一些額外的參考行與對(duì)Javascript函數(shù)的調(diào)用結(jié)合起來。

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