组件/图表

Blazor图表概述

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

为Blazor Ninja图像的Telerik UI

图表组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

创建Blazor图表

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

基本图

基本图表和常用设置/元素                  @code{公共类MyDataModel{公共int SecondSeriesValue {get;设置;}公共字符串ExtraData {get;设置;}} 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
    • 
          
  • 和其他人
    • 
         

         

          
要自定义图表，请查找嵌套标记及其属性—内部标记将包含其父标记名并在其末尾添加详细信息。例如，ChartSeries标签有一个ChartSeriesLabels标记，该标记公开配置选项和更多子标记。

         

         
图的大小

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

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

         

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

         

         
你可以创建一个响应式图表调整容器的大小并重新绘制图表 
           
 @code {string ContainerWidth {get;设置;} = "400px";string ContainerHeight {get;设置;} = "300px";telerikchart图表{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" }; }
         
图参数

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

         
         

          
           

            参数
            类型和默认值
            描述
           

          
          
           

            宽度
            字符串
            控制StockChart的宽度。
           

           

            高度
            字符串
            控制StockChart的高度。
           

           

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

           

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

          
         

         
图表参考和方法

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

         

          
           

            方法
            描述
           

          
          
           

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

          
         

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

         
下一个步骤

         
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       找不到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进本文
      

     

    
   
   

   
  
  
  
  
  
  
 
Baidu