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

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

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

配置

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

添加代碼

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

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

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

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

ChartGen.razor

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

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

@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組件文件中，將向圖表添加調(diào)用，并將html標(biāo)簽放置在html頁面中以進(jìn)行渲染。在代碼部分中，填充圖表。 設(shè)置一個變量并調(diào)用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ù)據(jù)的關(guān)閉表格標(biāo)簽下，添加以下行：

<h3>TeeChart Static Chart Image</h3>

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

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

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

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

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

ChartGen.razor

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

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

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

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

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

頁面的代碼部分現(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組件中，因此它們需要進(jìn)入該項目隨附的_Host.cshtml文件。

_Host.cshtml file

這些行應(yīng)進(jìn)入頁面標(biāo)題：

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

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

調(diào)整代碼大小

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

utils.js file

當(dāng)調(diào)整瀏覽器頁面本身的大小時，腳本將管理圖表的大小調(diào)整。下面是內(nèi)容：

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事件中添加調(diào)用來調(diào)用調(diào)整大小。

<body onresize="resizeChart()">

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