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

翻译|使用教程|编辑:况鱼杰|2020-03-09 10:10:21.997|阅读 120 次

概述: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微信公众号☟☟☟,了解产品的最新动态及最新资讯。

慧聚IT


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:steema https://steema.com/wp/blog/2020/02/20/teechart-for-net-with-razor-and-blazor-under-net-core-3/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
TeeChart for .NET

优秀的工业4.0 WinForm图表控件,官方独家授权汉化,集功能全面、性能稳定、价格实惠等优势于一体

Visual Studio

非常完备的工具和服务,可帮助您为 Microsoft 平台和其他平台创建各种各样的应用程序

TeeChart Pro ActiveX

交互性强的轻量级ActiveX图表控件,能高效生成多任务仪表板

TeeChart Pro VCL/FMX

支持RAD Studio,Delphi和C ++ Builder以及FireMonkey的图表制作工具

TeeChart for Java

适用于所有主流Java编程环境的TeeChart图表库

TeeChart for PHP

一款含100%的PHP源代码并支持PHP5及更高的版本的图表开发工具

TeeChart for JavaScript/HTML5

基于HTML5画布的跨浏览器JavaScript图表库

TeeChart for Xamarin.Android

使用C#版本,源于TeeChart for .NET代码库的移动版本图表控件

TeeChart for Xamarin.iOS

适用于Mac iOS平台-iPhone和iPad设备的图表控件

TeeChart for Xamarin.Forms

iOS,Android以及Windows Phone平台的图表工具

TeeChart Java for Android

专用于Google的安卓平台的图表库

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat