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

點擊下載TeeChart for PHP試用版

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

1. 介紹

2. 靜態導出

3. 實時HTML5圖表

介紹

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

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

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

靜態導出

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

如何導出到靜態HTML5圖表

    將Chart導出到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");

    此代碼將創建一個html文件，其中包含執行或html 5 Chart所必需的行。

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

實時HTML5圖表

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

    并非所有系列類型都可用于此類導出。

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

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

如何導出到實時HTML5圖表

   ; 當我們將圖表輸入到javascript（實時）時，我們有兩個選項可供選擇。

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

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

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

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

    $ chartName參數是可選的，當我們需要在使用的javascript代碼中使用Chart的名稱時，它將用作id。如果未包含此參數，則默認使用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添加各種工具。這些只能在導出實時圖表時使用。可用的工具是：

注釋

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

    此外，您可以在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);

光標

    如果我們使用光標工具，我們可以在Chart中顯示不同的游標。這些可以根據您的喜好進行定制，方法是更改顏色，寬度和長度等屬性，并使其跟隨鼠標的移動。

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

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

滾輪

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

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

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

滑塊

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

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

工具提示

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

    這允許我們為OnShow事件分配不同的值，并使用相同的屬性為OnGetText OnHide分配。

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

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

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

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

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

    TeeChart for .NET，TeeChart for JavaScript/HTML5，TeeChart for Xamarin.Android均已加入在線訂購，現在搶購可立享特別優惠！！！

    關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。