界面组件库Kendo UI for Angular入门指南教程:图表 – 皮肤设置

图表的颜色源自激活的Kendo UI 主题,可以通过主题变量和配置自定义它们。

Kendo UI for Angular最新版工具下载

设置尺寸

默认情况下,图表高 400 像素,与容器一样宽。 要设置图表的尺寸,请使用内联样式和 CSS。

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<kendo-chart style="width: 300px; height: 200px;">
<kendo-chart-series>
<kendo-chart-series-item [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: number[] = [1, 2, 3, 5];
}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

UI组件库Kendo UI for Angular入门指南教程:图表 - 皮肤设置

限制显示范围

要限制图表显示的范围:

  1. 设置类别轴的min 和 max选项;
  2. 启用平移和缩放,以便用户能够查看其余数据。

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<kendo-chart
[categoryAxis]="{ categories: categories, max: 20, labels: { rotation: 'auto'} }"
renderAs="canvas"
[pannable]="{ lock: 'y' }"
[zoomable]="{ mousewheel: { lock: 'y' } }"
>
<kendo-chart-title text="My line chart"></kendo-chart-title>
<kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-tooltip format="{0}"></kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item type="line" style="smooth" [data]="serie.data" [name]="serie.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent implements OnInit {

serie: any = {
name: 'My data over time',
data: []
};
categories: number[] = [];

ngOnInit() {
const baseYear = 2000;
for (let i = 0; i < 200; i++) {
this.categories.push(baseYear + i);
this.serie.data.push(Math.floor(Math.random() * 200));
}
}

}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

UI组件库Kendo UI for Angular入门指南教程:图表 - 皮肤设置

Kendo UI for Angular | 下载试用

Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。


了解最新Kendo UI最新资讯,请关注Telerik中文网!

推荐这些文章:

界面组件库Kendo UI for Angular入门指南教程:图表 - 迷你图

迷你图是一个没有轴、坐标、图例、标题或其他图表特定元素的小图表。
Kendo UI for Angular最新版工具下载
一般来说,迷你图是简单的、字大小的图形,可以嵌入表格、标题或文本块中。 其图形表示的概念是由 Edward Tufte 开发的。 Kendo UI Sparkline 是 Kendo UI Chart 的一个版本,专为此特定应用程序量身定制。 虽然标准的 Kendo UI 图表组件的操作类似于块元素(由于其呈现在 div 元素中来允许轻松嵌入文本),但迷你图的操作类似于内联元素,因为它呈现在 span 元素中。
虽然迷你图通常是折线图,但它们也可以呈现...

UI组件库Kendo UI for Angular入门指南 - 图表的平移和缩放

Kendo UI for Angular Chart使用户能够通过对组件应用平移和缩放来查看特定范围。
Kendo UI for Angular最新版工具下载
要执行平移,请拖动图表的绘图区域。
要执行缩放,请执行以下任一操作:

鼠标滚轮(桌面)或捏缩放(移动),或
按住 Shift 键并选择一个区域。

要启用平移和缩放功能,请使用pannable 和 zoomable选项。
app.component.ts
 
import { Component } from '@angular/core';
import { data } from './d...

Angular CLI:入门指南 (一)

Angular CLI:入门指南 (一)
Angular CLI是一个功能强大的工具,可轻松构建高质量的Angular应用程序。
借助Angular CLI,我们只需很少的工作即可构建,开发,测试
构建和部署Angular应用程序。
对于初学者来说,需要了解Angular CLI的一些命令,
可以帮助他们快速启动新的Angular项目.
例如: `ng new`, `ng generate`, `ng serve`等等。
但是对于angular或者前端的专家而言,Angular CLI不仅仅是一个脚手架工具,
它是一组可以提高开发团队的工作效率,Angular应用程序的质量和性能的工具。
...

B/S端界面控件DevExtreme ASP.NET MVC入门指南 - 调用方法

DevExtreme v21.2正式版下载
要调用方法,请使用 JavaScript API。 例如,您有一个 Popup 控件:
Razor C#
@(Html.DevExtreme().Popup()
.ID("popup")
)
Razor VB
@(Html.DevExtreme().Popup() _
.ID("popup")
)
该控件在调用其 show() 方法后出现在页面上,下面的代码演示了如何调用此方法。
JavaScript
$("#popup").dxPopup("show");
注意:要在 JavaScript 中访问客户端小部件实例,请将 dx 前缀添加到小部件名称...

界面组件Telerik UI for WPF入门指南 - 修改默认样式

获取Telerik UI for WPF官方最新版
本文将向您展示两种修改控件默认样式的方法:

使用 Microsoft Blend 修改默认样式
使用 Visual Studio 修改默认样式
通过从主题 XAML 文件中提取来修改默认样式

出于本文的目的,我们将修改 RadGridView 的 FilteringDropDown 元素,但所描述的步骤可以应用于每个控件。
使用 Microsoft Blend 修改默认样式
注意:本文展示了如何使用 Blend for Visual Studio 2012 修改样式,但方法应该与程序的不同版本相似。
编辑其他样式
创建所需样式的第一个选...

B/S端界面控件DevExtreme ASP.NET MVC入门指南 - 如何添加项目

DevExtreme v21.2最新版下载
先决条件和安装
DevExtreme ASP.NET MVC控件具有以下系统要求:

Visual Studio 2015 或更高版本(带有 ASP.NET 和 Web 开发工作负载)
.NET Framework 4.5.2 或更高版本

DevExtreme ASP.NET MVC 控件包含在以下 DevExpress 订阅中 :Universal、DXperience、ASP.NET 和 DevExtreme。
将控件添加到项目
按照以下说明将控件添加到您的应用程序:

打开 Razor 文件(.cshtml&n...

界面控件Telerik UI for WPF入门指南 - Theme Helper

获取Telerik UI for WPF官方最新版
Theme Helper 使您可以直接修改特定基本控件的外观,而无需更改其控件模板。 该类包含以下依赖属性列表,可以在 XAML 中为每个主题直接设置这些属性:

MouseOverBrush:可用于设置鼠标悬停在控件上时应用的背景/边框画笔的值。
PressedBrush:可用于设置按下控件时应用的背景/边框画笔的值。
CheckedBrush:可用于设置元素处于 Checked 状态时应用的背景/边框 Brush 的值,当用于公开"checked"状态的元素(ToggleButton、RadListBoxItem 等)时,它会产生效果。...

界面控件Telerik UI for WinForms入门指南 - 使用VS扩展升级项目

Visual Studio Extensions 中的一个重要功能是项目升级向导。
升级向导(通过使用 Telerik > Telerik UI for WinForms > Upgrade Wizard 菜单项开始)用于更改项目使用的 Telerik UI for WinForms 版本。
获取Telerik UI for WinForms正式版下载
除了纯程序集引用更改之外,升级向导还提供了几个重要功能:

检查 Telerik 网站上是否有可用的Telerik UI for WinForms新版本
下载新发现的版本
Visual Studio 工具箱更新...

界面控件Telerik UI for WinForms入门指南:VS扩展 - 配置项目

获取Telerik UI for WinForms官方最新版
当您需要配置Telerik WinForms应用程序时,您可以通过 Telerik 菜单访问项目配置向导:

也可以通过右键单击要转换的项目访问的上下文菜单对应项来访问该向导。
Project Configuration Wizard的第一页允许您:

指定您的项目将使用哪些程序集。当选择UI for WinForms程序集时,会自动选择所有相关控件,反之亦然。

通过Project Configuration Wizard的第二页,您可以:

选择将哪个主题应用于您的项目,检查每个主题的内容或在Project Configu...

B/S端界面控件DevExtreme ASP.NET MVC入门指南 - 指定选项(二)

DevExtreme v21.2最新版下载
嵌套选项和集合
您可以使用 lambda 表达式来配置嵌套选项。 一个 lambda 参数启动了一个新的方法链,这些方法指定了嵌套选项。
Razor C#

Razor VB

您还可以使用 lambda 表达式来配置表示项目集合的选项。 在这种情况下,lambda 参数扮演项目工厂的角色,它的 Add() 方法将一个新项目添加到集合中。
Razor C#

Razor VB

自定义选项
当您需要将额外数据附加到控件时,您可以使用 Option 方法创建自定义选项。
下面的代码示例使用 TabPanelItemBuilder.Option 方法为...

文章标题:界面组件库Kendo UI for Angular入门指南教程:图表 – 皮肤设置
文章链接:https://www.dianjilingqu.com/51100.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>