TeeChart for PHP包含100%的PHP源代碼。它支持PHP5及更高的版本。它可作為一個(gè)調(diào)色板組件整合到針對(duì)PHP的Delphi編程環(huán)境中，從而讓其他人在運(yùn)行時(shí)以創(chuàng)建組件的方式來(lái)引用。第一個(gè)版本提供17種圖表類型（2D和3D的多種組合），11個(gè)數(shù)學(xué)函數(shù)和一些圖表工具組件以擴(kuò)展功能。

點(diǎn)擊下載TeeChart for PHP試用版

    本教程是TeeChart for PHP教程中Javascript / HTML5圖表這一節(jié)，將會(huì)介紹如何在客戶端頁(yè)面上創(chuàng)建靜態(tài)和實(shí)時(shí)HTML5圖表。內(nèi)容主要分為以下幾個(gè)部分：

1. 介紹

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

3. 實(shí)時(shí)HTML5圖表

介紹

    TeeChart for PHP為您提供了將圖表編寫到原生HTML5中的瀏覽器頁(yè)面的可能性，有兩種模式，Static/靜態(tài)和Live/實(shí)時(shí)。

    靜態(tài)將圖表寫為原始級(jí)別的畫布命令系列，忠實(shí)地將圖表的每一行，原始形狀和文本復(fù)制為一系列原生HTML5畫布指令。此導(dǎo)出格式可以重現(xiàn)TeeChart PHP庫(kù)中的每個(gè)圖表，就像JPEG或PNG格式圖像一樣。

    實(shí)時(shí)將圖表寫為一系列可尋址的HTML5元素。這允許動(dòng)畫和交互性應(yīng)用于原生HTML5 Javascript格式的圖表。此導(dǎo)出模式不支持所有圖表類型，有關(guān)詳細(xì)信息，請(qǐng)參閱下面的描述部分，但允許添加交互式工具并支持mousedrag縮放和頁(yè)面滾動(dòng)。

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

    將圖表導(dǎo)出為靜態(tài)HTML5將生成文件或文本，其中包含瀏覽器理解和顯示圖表所必需的代碼。 獲得的外觀幾乎與使用GDGraphics生成的圖表相同。

如何導(dǎo)出到靜態(tài)HTML5圖表

    將Chart導(dǎo)出到HTML5所需的步驟很簡(jiǎn)單，它只包含一行代碼：

include "../../../../sources/TChart.php";     
      $chart1 = new TChart(500,350);
      $chart1->getAspect()->setView3D(false);
      $chart1->getHeader()->setText("HTML5 Demo");
      $chart1->getPanel()->getGradient()->setVisible(false);     
      $chart1->getPanel()->setColor(Color::WHITE());
 
      // Add Series to the Chart
      $line = new Line($chart1->getChart());
      $line->fillSampleValues(6);
      $line->setColor(Color::DARK_GRAY());
      $line->getLinePen()->setWidth(3);
      $line->getPointer()->setVisible(true);
      $line->getPointer()->setStyle(PointerStyle::$CIRCLE);
      $chart1->getChart()->getExport()->getImage()->getHTML5()->save($path."\\TChart.html");

    此代碼將創(chuàng)建一個(gè)html文件，其中包含執(zhí)行或html 5 Chart所必需的行。

    您可以在導(dǎo)出 - > HTML5  - > HTML5導(dǎo)出文件夾中找到的功能演示中找到如何使用它的示例。

實(shí)時(shí)HTML5圖表

    正如我們?cè)?a target="_blank">教程11-插件和附加功能中看到的，最新版本的TeeChart PHP在其源代碼中包含了一個(gè)版本的TeeChart JavaScript，它允許我們使用javascript版本獨(dú)立的使用javascript代碼在我們的瀏覽器中生成圖表，我們也可以繼續(xù)使用我們的PHP代碼創(chuàng)建圖表，然后將其導(dǎo)出到j(luò)avascript圖表，從而在我們的實(shí)時(shí)頁(yè)面上獲取javascript圖表，而無(wú)需使用單行的javascript代碼。

    并非所有系列類型都可用于此類導(dǎo)出。

    可以在Features  - > JScript  - > TeeChartJavaScript中的功能演示中找到示例。

    其他使用不同類型os系列的工作示例可以在Features  - > JScript  - > Series  - >中的Features演示中找到。

如何導(dǎo)出到實(shí)時(shí)HTML5圖表

    當(dāng)我們將圖表輸入到j(luò)avascript（實(shí)時(shí)）時(shí)，我們有兩個(gè)選項(xiàng)可供選擇。

    我們可以將Chart導(dǎo)出到一個(gè)文件中，在該文件中我們生成一個(gè)HTML文件，其中包含瀏覽器的必要代碼，以便在javascript中顯示代碼：

$chart1->getChart()->getExport()->getImage()->getJavaScript()->SaveToFile('jschartToolTip.html', $chartName);

    或者我們可以直接導(dǎo)出到流，這將允許我們直接在瀏覽器中繪制圖表，而無(wú)需事先將代碼保存在文件中。

echo  $chart1->getChart()->getExport()->getImage()->getJavaScript()->Render($chartName)->toString();

    $ chartName參數(shù)是可選的，當(dāng)我們需要在使用的javascript代碼中使用Chart的名稱時(shí)，它將用作id。如果未包含此參數(shù)，則默認(rèn)使用chart1。

    您可以在JScript文件夾的Features演示中找到工作示例。

以下是完整代碼的示例：

getChart());
      $line->fillSampleValues(6);
      $line->getPointer()->setVisible(true);
     
      $tipTool = new ToolTip($chart1->getChart());
      $tipTool->setSeries($line);     
      $tipTool->getFont()->setName('Tahoma');
      $tipTool->getFont()->setSize(20);
      $tipTool->getFont()->setColor(Color::RED());
     
      $tipTool->setOnShow("
        function(tool,series,index) { scaling=2; poindex=index; }       
      ");
     
      $tipTool->setOnHide("
        function() { scaling=0; poindex=-1; }
      ");
     
      $tipTool->setOnGetText('
        function(tool,text) { return "Text:\n"+text; }
      ');
 
      // In case you want to save to a file
      $chart1->getChart()->getExport()->getImage()->getJavaScript()->SaveToFile('jschartToolTip.html');        
?>     
getChart()->getExport()->getImage()->getJavaScript()->Render()->toString();     
?>

Javascript / HTML5圖表工具

    PHP版本中包含的JavaScript功能允許我們輕松地向Chart添加各種工具。這些只能在導(dǎo)出實(shí)時(shí)圖表時(shí)使用。可用的工具是：

注釋

    此工具允許我們?cè)趫D表中添加一個(gè)或多個(gè)注釋。您可以選擇幫助庫(kù)中提供的屬性。

    此外，您可以在Features  - > JScript  - > Annotation中的Features演示中找到示例。

 $chart1->getChart()->getTools()->add(new Annotation());
      $chart1->getChart()->getTools()->getTool(0)->setText("Annotation");
      $chart1->getChart()->getTools()->getTool(0)->setLeft(100);
      $chart1->getChart()->getTools()->getTool(0)->setTop(100);

光標(biāo)

    如果我們使用光標(biāo)工具，我們可以在Chart中顯示不同的游標(biāo)。這些可以根據(jù)您的喜好進(jìn)行定制，方法是更改顏色，寬度和長(zhǎng)度等屬性，并使其跟隨鼠標(biāo)的移動(dòng)。

    它包含一個(gè)事件（指定為屬性）OnChange，它允許我們?cè)陧?yè)面中添加javascript。更改它將被指定為文本，并將在Cursor的事件OnChange中執(zhí)行。

    可以在Features  - > JScript  - > Cursor中的Features演示中找到示例.

滾輪

    滾輪工具允許我們?cè)诎罅繑?shù)據(jù)時(shí)選擇圖表的特定區(qū)域，哪怕是很難理解小細(xì)節(jié)。我們可以使用所有數(shù)據(jù)指定圖表的所需大小，并在此區(qū)域內(nèi)指定我們想要詳細(xì)查看的內(nèi)容，這將在另一個(gè)圖表中顯示。我們可以選擇使用鼠標(biāo)輕松放大或移動(dòng)此選定區(qū)域。

    除了允許您自定義大小的工具屬性，選擇區(qū)域等，它還包括事件（指定為屬性）OnChanging，它允許您在頁(yè)面中添加javascript代碼。這被指定為文本，并將在Cursor OnChanging事件中實(shí)現(xiàn)。

    您可以在Features  - > JScript  - > Scroller中的Features演示中找到示例。

滑塊

    滑塊工具具有與滾動(dòng)工具類似的功能，允許我們選擇要在圖表中顯示的最大值和最小值，但區(qū)別在于它不會(huì)創(chuàng)建包含所有數(shù)據(jù)的另一個(gè)圖表，但添加了滑塊組件在我們指定的位置。這允許我們使用鼠標(biāo)移動(dòng)所有圖表數(shù)據(jù)。它還包含屬性O(shè)nChanging事件。

    您可以在功能 - > JScript  - >滑塊中的Features演示中找到示例。

工具提示

    工具提示工具是許多類型圖表的必備工具。它允許您在鼠標(biāo)光標(biāo)的點(diǎn)經(jīng)過(guò)指定點(diǎn)時(shí)顯示包含文本的標(biāo)簽（例如值），當(dāng)光標(biāo)離開同一點(diǎn)上方的極點(diǎn)時(shí)，又使其消失，并隱藏以遠(yuǎn)離該點(diǎn)。

    這允許我們?yōu)镺nShow事件分配不同的值，并使用相同的屬性為OnGetText OnHide分配。

    您可以在功能 - > JScript  - >工具提示中的Features演示中找到示例。

使用自定義代碼增強(qiáng)頁(yè)面上的圖表

    由于PHP版本允許我們輕松地將javascript代碼添加到我們的頁(yè)面，添加對(duì)teechart.js的引用后，就可以為我們提供使用javascript改進(jìn)或自定義我們的javascript圖表的選項(xiàng)。

   ; 在TeeChart for PHP文件夾Docs中，您將找到TeeChart javascript的必要文檔，以及開發(fā)人員希望在其頁(yè)面中使用jscript代碼的函數(shù)。

    TeeChart for PHP教程到這里就結(jié)束了，你可以點(diǎn)擊此處跳轉(zhuǎn)到teechart資源的合集，尋找適合你的資源。

    TeeChart for .NET，TeeChart for JavaScript/HTML5，TeeChart for Xamarin.Android均已加入在線訂購(gòu)，現(xiàn)在搶購(gòu)可立享特別優(yōu)惠！！！

    關(guān)注慧聚IT微信公眾號(hào)???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。