TeeChart for .NET是優(yōu)秀的工業(yè)4.0 WinForm圖表控件，官方獨家授權漢化，集功能全面、性能穩(wěn)定、價格實惠等優(yōu)勢于一體。TeeChart for .NET 中文版還可讓您在使用和學習上沒有任何語言障礙，至少可以節(jié)省30%的開發(fā)時間。

點擊立即下載最新版TeeChart for .NET

本文將會回顧兩種方法，一種是使用呈現(xiàn)在頁面上的靜態(tài)TeeChart圖像，另一種是使用實時Javascripted TeeChart。

配置

• 選擇創(chuàng)建一個標準的Blazor項目。
• 在Visual Studio中，創(chuàng)建一個新項目，然后選擇“ Blazor App”作為項目類型，再稱其為“ TeeChartOnBlazor”。
• 如果您運行這個新項目，將會看到它已經加載了內容，主頁，計數(shù)器和獲取數(shù)據頁面，這些頁面顯示了一些隨機生成的天氣統(tǒng)計信息。
• 將依賴項添加到該項目的TeeChart。該項目是Net.Core 3，因此如果您轉到Nuget Manager，則可以選擇并添加“ Steema.TeeChart.NETCore”程序集。
• 通過文件添加菜單，將新的Razor組件添加到Pages文件夾； 稱為“ ChartGen.razor”。

添加代碼

現(xiàn)在您已經有了構建塊，可以開始將圖表生成代碼添加到新的ChartGen.razor組件文件中。

連接數(shù)據并將圖表渲染為圖像

接下來將添加代碼以創(chuàng)建TeeChart并連接到數(shù)據。數(shù)據是從呈現(xiàn)數(shù)據表的頁面動態(tài)輸入的；這樣，可以確保每次通話數(shù)據同步。

在“ ChartGen”標題之前，在ChartGen.razor頁面中添加一些用法。

ChartGen.razor

@using Steema.TeeChart;
@using System.IO;
@using System.Drawing;
@using TeeChartOnBlazor.Data;   //the project data

在下面，為新組件添加代碼塊。用于填充圖表并呈現(xiàn)為圖像的代碼由一種方法組成。該方法接受數(shù)據，填充圖表并將其呈現(xiàn)為圖像，該圖像轉換為Base64文本，可直接傳輸?shù)巾撁嫔系膇mg標簽。

@code { 
 public TaskGetChart(WeatherForecast[] forecasts, int 
                 width, int height)
 {
  Steema.TeeChart.Chart mChart = new Chart();
  Steema.TeeChart.Styles.Bar mBar = new Steema.TeeChart.Styles.Bar();

  mChart.Header.Text = "TeeChart in Blazor example";

  mChart.Series.Add(mBar);

  //mBar.FillSampleValues();
  foreach (WeatherForecast forecast in forecasts){
   int aDate = (int)Math.Truncate(forecast.Date.ToOADate()); //day stamp
   mBar.Add(aDate, forecast.TemperatureC);
  }

  mBar.Origin = 0;

  mBar.XValues.DateTime = true;
  //mChart.Axes.Bottom.Labels.Angle = 90;
  mChart.Axes.Bottom.Increment = 
            Steema.TeeChart.Utils.GetDateTimeStep(DateTimeSteps.OneDay);

  MemoryStream ms = new MemoryStream();
  mChart.Export.Image.JPEG.Width = width;
  mChart.Export.Image.JPEG.Height = height;
  mChart.Export.Image.JPEG.Save(ms);
  Image img = Image.FromStream(ms);

  String str = Convert.ToBase64String(ms.ToArray());

  return Task.FromResult("data:image/bmp;base64," + str);
 }  
}

在FetchData.razor組件文件中，將向圖表添加調用，并將html標簽放置在html頁面中以進行渲染。在代碼部分中，填充圖表。 設置一個變量并調用chart方法：

@code {
 WeatherForecast[] forecasts;
 String chartImage;

 protected override async Task OnInitializedAsync()
 {
  forecasts = await ForecastService.GetForecastAsync(DateTime.Now);

  ChartGen cGen = new ChartGen();
  chartImage = await cGen.GetChart(forecasts, 1200, 300);
 }

在組件文件的html部分中，在顯示數(shù)據的關閉表格標簽下，添加以下行：

<h3>TeeChart Static Chart Image</h3>

<p><img src="@chartImage" width="100%" /></p>

html引用chartImage變量并顯示Chart。通過一個方法，除了添加TeeChart本身之外，沒有其他依賴項，您就可以將數(shù)據表的內容呈現(xiàn)到Chart。

連接到數(shù)據并將Chart呈現(xiàn)為本地Javascript TeeChart

將圖表繪制為動態(tài)TeeChart javascript對象需要采取一些步驟，但并不特別復雜。一旦設置，就可以增強JavaScript圖表，以提供完整的交互性和對數(shù)據情況的響應。

首先，將代碼方法添加到ChartGen.razor，就在為Image版本設置的方法的下面。

ChartGen.razor

該方法與圖表圖像格式代碼非常相似。添加了一些附加功能，以方便在瀏覽器中調整圖表大小。

public Task GetJSChart(WeatherForecast[] forecasts, int width, int height)
{
 Steema.TeeChart.Chart mChart = new Chart();
 Steema.TeeChart.Styles.Bar mBar = new Steema.TeeChart.Styles.Bar();

 mChart.Header.Text = "TeeChart in Blazor example";
 mChart.Series.Add(mBar);

 //mBar.FillSampleValues();
 foreach (WeatherForecast forecast in forecasts){   int aDate = (int)Math.Truncate(forecast.Date.ToOADate()); //day stamp   mBar.Add(aDate, forecast.TemperatureC); }

 mBar.XValues.DateTime = true;
 //mChart.Axes.Bottom.Labels.Angle = 90;
 mChart.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(DateTimeSteps.OneDay);

 chartName = "dynoTeeChart";
 mChart.Export.Image.JScript.ChartName = chartName;

 MemoryStream ms = new MemoryStream();
 mChart.Export.Image.JScript.Width = width;
 mChart.Export.Image.JScript.Height = height;
 mChart.Export.Image.JScript.DoFullPage = false; //inline, no page  header tags
 mChart.Export.Image.JScript.CustomCode = new string[] { "resize("+chartName+");" };
 mChart.Export.Image.JScript.Save(ms);

ms.Position = 0;

StreamReader reader = new StreamReader(ms);
 //setup our chart name, here 'dynoChartName'.
 string result = "";

 return Task.FromResult(result);
}

就像為圖表的圖像版本所做的一樣，向組件添加一個字符串變量，調用填充它的方法，并向頁面添加html tage以呈現(xiàn)它。 在這種情況下，標記是HTML5 Canvas標記。

<h3>TeeChart Static Chart Image</h3>

<p><img src="@chartImage" width="100%" /></p>
<br />
<br />
<h3>TeeChart Dynamic Javascript Chart</h3>
<canvas id="canvas1" width="1400" height="300" style="border: 1px solid #808080;">
  This browser does not seem to support HTML5 Canvas.
</canvas>

@((MarkupString)chartJS)@((MarkupString)(chartResize));

請注意最后的標記@（（（MarkupString）chartJS），這是javascript圖表變量，運行時為填充的字符串，并帶有將字符串保留為原始格式且請勿嘗試將其轉換為人類可讀格式的指令。第二個MarkupString變量添加了Chart調整大小代碼。

頁面的代碼部分現(xiàn)在如下所示：

@code {
  WeatherForecast[] forecasts;
  String chartImage;
  String chartJS;  String chartResize;

  protected override async Task OnInitializedAsync()
  {
    forecasts = await ForecastService.GetForecastAsync(DateTime.Now);

    ChartGen cGen = new ChartGen();
    chartImage = await cGen.GetChart(forecasts, 1200, 300);
    chartJS = await cGen.GetJSChart(forecasts, 1200, 300);    chartResize = "";
  }
}

現(xiàn)在已完成了ChartGen.razor和FetchData.razor文件。盡管還需要一些指向TeeChart的javascript源文件的鏈接，但是無法將腳本鏈接放入Razor組件中，因此它們需要進入該項目隨附的_Host.cshtml文件。

_Host.cshtml file

這些行應進入頁面標題：

<script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>

  <script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js" type="text/javascript"></script>
  <script src="http://www.steema.com/files/public/teechart/html5/latest/src/date.format.js" type="text/javascript"></script>
  <script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart-maps.js" type="text/javascript"></script>
  <script src="js/utils.js" type="text/javascript"></script>

調整代碼大小

請注意腳本參考的最后一行，即指向“ js / utils.js”文件的鏈接。項目中還沒有這個。接下來將在“ wwwroot”文件夾下添加一個名為“ js”的新文件夾，并添加一個名為“ utils.js”的新javascript文件。腳本對其進行調用，以在重新設計的瀏覽器窗口中管理javascript圖表的大小。

utils.js file

當調整瀏覽器頁面本身的大小時，腳本將管理圖表的大小調整。下面是內容：

function resize(chart) {

  var startWidth = 1600;
  var startHeight = 400;
  var w;
  var h;
  var canvas = chart.canvas;
  if (chart != null) {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

      w = window.innerWidth;
      h = window.innerHeight;
      if (w <= 991) { canvas.style.width = "" + w * 0.9 + "px"; canvas.style.height = "" + w * 0.9 * startHeight / startWidth + "px"; } else { canvas.style.width = "" + startWidth + "px"; canvas.style.height = "" + startHeight + "px"; chart.bounds.width = startWidth; chart.bounds.height = startHeight; } chart.draw(); } else { w = startWidth; h = startHeight; if ((window.innerWidth - canvas.offsetLeft - 20) < startWidth) w = window.innerWidth - canvas.offsetLeft - 20; else w = startWidth; if ((window.innerWidth * startHeight / startWidth) < startHeight) h = window.innerWidth * startHeight / startWidth; else h = startHeight; canvas.setAttribute('width', "" + w + "px"); canvas.setAttribute('height', "" + h + "px"); canvas.style.width = "" + w + "px"; canvas.style.height = "" + h + "px"; chart.bounds.width = w; chart.bounds.height = h; chart.draw(); } } }

通過在_Host.cshtml文件的主體onresize事件中添加調用來調用調整大小。

<body onresize="resizeChart()">

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