组件/图表

Blazor图表概述

的Blazor图表组件允许您以有意义的方式向用户可视化数据，以便他们可以得出结论。您可以使用各种图表类型并控制图表外观的各个方面-从颜色和字体到填充、边距和模板。

《Blazor Ninja》图像的teleerik UI

的一部分《Blazor》的teleerik UI，一个专业级的UI库，有100个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

创建Blazor图表

  1. 添加< TelerikChart >标签到你的剃刀页面。
  2. 定义图表系列和将它们绑定到数据．
  3. 配置类别轴(X轴)。或者设置一个CategoryField为每一个< ChartSeries >，或提供全部类别散装地< ChartCategoryAxis >标签。
  4. 设置一个< ChartTitle >和位置的< ChartLegend >．要显示图例，请定义名字为每一个< ChartSeries >．

基本图

基本图表和常用设置/元素         < ChartCategoryAxis>   < ChartCategoryAxis>     @code{公共类MyDataModel{公共int seconseriesvalue {get;设置;}公共字符串ExtraData{获取;设置;}} public List modelData = new List() {new MyDataModel() {SecondSeriesValue = 1, ExtraData = "first"}， new MyDataModel() {SecondSeriesValue = 5, ExtraData = "second"}， new MyDataModel() {SecondSeriesValue = 3, ExtraData = "third"}， new MyDataModel() {SecondSeriesValue = 2, ExtraData = "fourth"}，};public List simpleData = new List() {10,2,7,5};public string[] xAxisItems = new string[] {"Q1"， "Q2"， "Q3"， "Q4"}; }
         
图表元素

         
自定义图表元素-嵌套标签设置

         
当在图表中配置嵌套属性和子元素时，内部标签将包含它们的父标签名称，并在其末尾添加具体内容。一般来说，这种嵌套标记的结构将是<图*级* * *细节>类别可以是下列其中一项:

         
    
          
  • CategoryAxis
    • 
          
  • ChartArea
    • 
          
  • 传说
    • 
          
  • PlotArea
    • 
          
  • SeriesItems
    • 
          
  • 标题
    • 
          
  • 工具提示
    • 
          
  • ValueAxis
    • 
          
  • XAxes
    • 
          
  • YAxes
    • 
          
  • 和其他人
    • 
         

         

          
要自定义图表，请查找嵌套的标记及其属性—内部标记将包含它们的父标记名称并在其末尾添加具体内容。例如，ChartSeriesTag有一个ChartSeriesLabels标记，公开配置选项和更多子标记。

         

         
图的大小

         
要控制图表大小，请使用its宽度和高度属性。你可以阅读更多关于他们是如何工作的维篇文章。

         
您还可以以百分比值设置图表大小，以便在呈现时占用其容器。如果父容器的大小发生变化，则必须调用图表的Refresh ()在重新绘制DOM并呈现新的容器尺寸之后，使用c#方法。当您显式地更改容器大小时(如下面的示例所示)，或者从诸如window.resize．你可以找到一个重新绘制图表的例子window.resize在响应图样本。

         

          
动态更改100%图表大小以获得响应式图表

         

         
你可以制作一个响应式图表调整容器的大小并重新绘制图表 
          
 @code {string ContainerWidth {get;设置;} = "400px";string ContainerHeight {get;设置;} = "300px";Telerik.Blazor.Components.TelerikChart chart {get;设置; } async Task ResizeChart() { //resize the container ContainerHeight = "500px"; ContainerWidth = "800px"; //give time to the framework and browser to resize the actual DOM so the chart can use the expected size await Task.Delay(20); //redraw the chart theChart.Refresh(); } public List someData = new List() { 10, 2, 7, 5 }; public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; }
         
图参数

         
下表列出了图表参数，这些参数在组件文档的其他地方没有讨论。

         
         

          
           

            参数
            类型和默认值
            描述
           

          
          
           

            宽度
            字符串
            控制股票图表的宽度。
           

           

            高度
            字符串
            控制股票图表的高度。
           

           

            类
            字符串
            控件上呈现自定义CSS类< div class = " k-chart”>元素。
           

           

            转换
            bool吗?
            控制图表是否呈现动画。
           

          
         

         
图表参考及方法

         
要执行Chart方法，通过。获取对组件实例的引用@ref．

         

          
           

            方法
            描述
           

          
          
           

            刷新
            使用此方法以编程方式重新呈现图表。
           

          
         

         
@using telerikkblazor . components 刷新图表   @code {public TelerikChart myChartRef;private void refreshchart () {myChartRef.Refresh();}}

         
下一个步骤

         
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       没有找到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进这篇文章
      

     

    
   
   

   
  
  
  
  
  
  
 
Baidu