迷你圖是一個沒有軸、坐標(biāo)、圖例、標(biāo)題或其他圖表特定元素的小圖表。

Kendo UI for Angular最新版工具下載

一般來說，迷你圖是簡單的、字大小的圖形，可以嵌入表格、標(biāo)題或文本塊中。 其圖形表示的概念是由 Edward Tufte 開發(fā)的。 Kendo UI Sparkline 是 Kendo UI Chart 的一個版本，專為此特定應(yīng)用程序量身定制。 雖然標(biāo)準(zhǔn)的 Kendo UI 圖表組件的操作類似于塊元素（由于其呈現(xiàn)在 div 元素中來允許輕松嵌入文本），但迷你圖的操作類似于內(nèi)聯(lián)元素，因?yàn)樗尸F(xiàn)在 span 元素中。

雖然迷你圖通常是折線圖，但它們也可以呈現(xiàn)為以下圖表類型：

• 線型（默認(rèn)）
• 條形圖（數(shù)據(jù)條形圖）
• 柱型
• 區(qū)域
• 餅圖
• Bullet

以下示例演示了迷你圖的實(shí)際應(yīng)用。

app.component.ts

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

@Component({
selector: 'my-app',
template: `
<p>
A sparkline is a very small chart
<kendo-sparkline [data]="data">
</kendo-sparkline>
, drawn without axes, coordinates or other supportive elements.
</p>
<p>
While sparklines are typically Line Charts
<kendo-sparkline [data]="data">
</kendo-sparkline>
, they can also be rendered as:
<p>
<ul>
<li>
Bar/Column Chart
<kendo-sparkline [data]="data" type="column">
</kendo-sparkline>
</li>
<li>
Area Chart
<kendo-sparkline [data]="data" type="area">
</kendo-sparkline>
</li>
<li>
Pie Chart
<kendo-sparkline [data]="pieData" type="pie">
</kendo-sparkline>
</li>
<li>
Bullet Chart
<kendo-sparkline [data]="bulletData" type="bullet" [valueAxis]="bulletValueAxis">
</kendo-sparkline>
</li>
</ul>
`
})
export class AppComponent {
public data: any[] = [
936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007
];

public pieData: any[] = [1, 2, 3];
public bulletData: any[] = [21, 23];
public bulletValueAxis: any = {
min: 0,
max: 30,
plotBands: [{
from: 0, to: 15, color: '#787878', opacity: 0.15
}, {
from: 15, to: 22, color: '#787878', opacity: 0.3
}, {
from: 22, to: 30, color: '#787878', opacity: 0.15
}]
};
}

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 { ButtonsModule } from '@progress/kendo-angular-buttons';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

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

@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule, ButtonsModule, InputsModule ],
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);

主要特點(diǎn)

• 迷你圖包括用于設(shè)置數(shù)據(jù)和類型系列選項(xiàng)的快捷方式。
• 此外，迷你圖支持適用于圖表的分類系列類型的所有配置選項(xiàng)。

Kendo UI for Angular | 下載試用

Kendo UI for Angular是Kendo UI系列商業(yè)產(chǎn)品的最新產(chǎn)品。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關(guān)系。