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

點擊下載TeeChart for PHP試用版

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

1. 介紹

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

3. 實時HTML5圖表

介紹

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

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

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

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

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

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

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

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)建一個html文件，其中包含執(zhí)行或html 5 Chart所必需的行。

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

實時HTML5圖表

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

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

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

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

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

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

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

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

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

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

    $ chartName參數(shù)是可選的，當(dāng)我們需要在使用的javascript代碼中使用Chart的名稱時，它將用作id。如果未包含此參數(shù)，則默認使用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)出實時圖表時使用。可用的工具是：

注釋

    此工具允許我們在圖表中添加一個或多個注釋。您可以選擇幫助庫中提供的屬性。

    此外，您可以在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ù)您的喜好進行定制，方法是更改顏色，寬度和長度等屬性，并使其跟隨鼠標(biāo)的移動。

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

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

滾輪

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

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

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

滑塊

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

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

工具提示

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

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

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

使用自定義代碼增強頁面上的圖表

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

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

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

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

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