TeeChart for .NET在Net.Core 3下与Razor和Blazor合作

TeeChart for .NET Core组件可以在Razor组件中使用，以将可重用代码添加到您的项目组合中。本文将会回顾两种方法，一种是使用呈现在页面上的静态TeeChart图像，另一种是使用实时Javascripted TeeChart。

TeeChart for .NET是优秀的工业4.0 WinForm图表控件，官方独家授权汉化，集功能全面、性能稳定、价格实惠等优势于一体。TeeChart for .NET 中文版还可让您在使用和学习上没有任何语言障碍，至少可以节省30%的开发时间。

点击立即下载最新版TeeChart for .NET

TeeChart for .NET Core组件可以在Razor组件中使用，以将可重用代码添加到您的项目组合中。

本文将会回顾两种方法，一种是使用呈现在页面上的静态TeeChart图像，另一种是使用实时Javascripted TeeChart。

配置

• 选择创建一个标准的Blazor项目。
• 在Visual Studio中，创建一个新项目，然后选择“ Blazor App”作为项目类型，再称其为“ TeeChartOnBlazor”。
• 如果您运行这个新项目，将会看到它已经加载了内容，主页，计数器和获取数据页面，这些页面显示了一些随机生成的天气统计信息。
• 将依赖项添加到该项目的TeeChart。该项目是Net.Core 3，因此如果您转到Nuget Manager，则可以选择并添加“ Steema.TeeChart.NETCore”程序集。
• 通过文件添加菜单，将新的Razor组件添加到Pages文件夹； 称为“ ChartGen.razor”。

添加代码

现在您已经有了构建块，可以开始将图表生成代码添加到新的ChartGen.razor组件文件中。

连接数据并将图表渲染为图像

接下来将添加代码以创建TeeChart并连接到数据。数据是从呈现数据表的页面动态输入的；这样，可以确保每次通话数据同步。

在“ ChartGen”标题之前，在ChartGen.razor页面中添加一些用法。

ChartGen.razor

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

在下面，为新组件添加代码块。用于填充图表并呈现为图像的代码由一种方法组成。该方法接受数据，填充图表并将其呈现为图像，该图像转换为Base64文本，可直接传输到页面上的img标签。

@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

在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部分中，在显示数据的关闭表格标签下，添加以下行：

<h3>TeeChart Static Chart Image</h3>

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

html引用chartImage变量并显示Chart。通过一个方法，除了添加TeeChart本身之外，没有其他依赖项，您就可以将数据表的内容呈现到Chart。

连接到数据并将Chart呈现为本地Javascript TeeChart

将图表绘制为动态TeeChart javascript对象需要采取一些步骤，但并不特别复杂。一旦设置，就可以增强JavaScript图表，以提供完整的交互性和对数据情况的响应。

首先，将代码方法添加到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);}

FetchData.razor

就像为图表的图像版本所做的一样，向组件添加一个字符串变量，调用填充它的方法，并向页面添加html tage以呈现它。 在这种情况下，标记是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调整大小代码。

页面的代码部分现在如下所示：

@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 = "";  }}

现在，将图表两次作为图像和javascript图表呈现到页面上。

现在已完成了ChartGen.razor和FetchData.razor文件。尽管还需要一些指向TeeChart的javascript源文件的链接，但是无法将脚本链接放入Razor组件中，因此它们需要进入该项目随附的_Host.cshtml文件。

_Host.cshtml file

这些行应进入页面标题：

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

  <script src=”https://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js” type=”text/javascript”></script>
  <script src=”https://www.steema.com/files/public/teechart/html5/latest/src/date.format.js” type=”text/javascript”></script>
  <script src=”https://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()”>

该方法已在ChartGen GetJSChart方法中创建，并通过FetchData.razor组件文件加载。

现TeeChart for .NET已加入在线订购，现在抢购可立享优惠！

关注慧聚IT微信公众号了解产品的最新动态及最新资讯。

标签：

来源：慧都