Angular的Kendo UI

角图表组件

企业级数据可视化,在一个非常容易实现的Angular Chart组件中。

  • 几乎可以选择任何数据可视化,从简单的饼状、直线和列到复杂的股票图表类型。
  • 为Angular构建,以充分利用框架的性能和特性。
  • Angular库的100多个组件Kendo UI的一部分。
48 125
logos_customers-2x

高性能、漂亮的Angular数据可视化

专业的设计、交互性、高性能以及用户所期望的一切。下面是一些流行的功能。

将鼠标移到图表上查看交互。

系列类型

面积和垂直面积图

  • 通过选择区域颜色、覆盖不透明度等选项来配置这些Angular区域图。
  • 堆叠顺序可以是隐式的,也可以通过用户设置的zIndex来控制。
  • 垂直面积图在功能上与面积图相当,但调换了轴——类别轴是垂直的,值轴是水平的。
请看角面积和垂直面积图的演示
角面积和垂直面积图
系列类型

柱状图

  • 通过选择系列颜色、柱间间距等来配置这些Angular柱状图。
  • 堆叠酒吧和100%堆叠酒吧也包括在内。
  • 柱状图和柱状图完全相同,只是坐标轴互换了。
参见Angular条形图演示
角柱状图
系列类型

箱形图

  • Angular箱形图显示了每个系列数据的六个指标(低值、第一个四分位数、中位数、平均值、第三个四分位数、最大值)和异常值的数据分布摘要。
  • 自定义平均值和中值线、离群值和晶须的外观。
请参阅Angular盒状图演示
角形箱形图
系列类型

气泡图

  • 作为散点图的一种,Angular Bubble chart显示的是由项目值定义的大小的点。
  • 对科学、经济和社会关系有用的。
参见Angular Bubble Chart演示
角泡图
系列类型

子弹图表

  • 作为柱状图的一种变体,Angular Buller chart将给定的定量测量(如温度)与定性范围(如温暖、炎热和寒冷)进行比较,并将编码比较测量的符号标记(如一年前的最高温度)进行比较。
  • 通常用作仪表板仪表的替代品。
参见Angular项目图演示
角项目图
系列类型

甜甜圈图

  • 作为饼图的变体,Angular甜甜圈图可以显示多个系列。
  • 许多开发人员使用中心区域来显示附加信息。
参见Angular甜甜圈图演示
角甜甜圈图
系列类型

漏斗图

  • Angular漏斗图表显示了一系列数据,这些数据以分段的方式组织,按比例递减或递增,每个分段代表该系列中某项的值。
  • 值还可以影响段的大小和形状。
  • 基本配置选项包括漏斗形状和动态坡度和高度(基于项目值)。
参见Angular漏斗图演示
角漏斗图
系列类型

热图图表

  • Angular热图使用颜色来表示数据点的相对值。
  • 功能包括颜色尺度,标记形状和更多。
请看Angular热图的演示
角度热图
系列类型

直线和垂直线图

  • Angular折线图是最常见图表类型的一个易于实现的版本。
  • 在许多定制选项中有线条风格(普通,阶梯,平滑)和颜色。
参见Angular折线图演示
角折线图
系列类型

饼状图

  • Angular饼图是一种常见的图表类型,可以绑定到数字、数组或对象(又名模型)。
  • 内置灵活的标签。选择自动贴合容器以防止剪切。以圆形或列布局显示它们。
参见Angular饼图演示
角饼图
系列类型

雷达图表

角雷达图(也称为蜘蛛图)用于比较两个或多个系列的数据。它将X轴包裹在一个圆中,使数据系列形成一个独特的形状。

参见Angular雷达图演示
角雷达图
系列类型

距离柱状图

角范围条形图是标准条形图的变体。不同之处在于只有覆盖区域被填充。它对比较数据非常有用。

参见Angular Range柱状图演示
角距离柱状图
系列类型

散点图

  • Angular散点图组件包括散点图和散点线类型。
  • 这些图表对于显示跨两个变量的数据特别有用。
参见Angular散点图演示
角散点图
系列类型

瀑布图

瀑布图通过显示起始值、增减值和结束值来讲述数据随时间或类别的变化。

参见Angular瀑布图演示
角瀑布图
其他图表

股票图表

  • Angular股票图显示了股票随时间的价格变动。
  • 这是一个独立的组件,它扩展了基本图表组件并共享其特性。
  • 内置的导航窗格帮助用户锁定他们想要查看的数据。
参见Angular股票图表演示
Angular股票图
其他图表

Sparkline

  • Angular Sparkline是一个很小的图表,没有轴、坐标、图例、标题或其他特定于图表的元素。
  • 它们大多嵌入到表格、标题或文本上下文中。
  • 支持行、条、列、区域、饼和项目符号类型。
参见Angular Sparkline演示
角Sparkline
图表元素

  • 图表分类或时间序列数据
  • 选择日期范围
  • 显示多个轴
  • 自定义标签位置或限制标签数量
  • 平台聚合
参见Angular图表轴演示
角海图轴
图表元素

克罗斯

当图表标签被隐藏时,可能很难看到数据点的特定X和Y值。使用Angular Charts组件的Kendo UI内置的Crosshairs特性,你可以启用一条垂直于任意轴的交叉线,让用户可以看到光标当前位置的准确值。

参见Angular图表十字准星演示
角图表十字准星
图表元素

误差线

用误差条显示误差范围以指示数据点的可变性。在面向Angular Charts的Kendo UI中,你可以定义与每个值相关的高值和低值字段,允许一个指示器显示呈现的数据点位于可能值范围内的哪个位置。

参见Angular图表错误条演示
角图误差条
图表元素

标签

数据系列和轴标签是完全可定制的。在基本级别上,设置外观、位置和可见性。对于更高级的场景,加载自定义内容或非文本视觉效果。

参见Angular图表标签演示
角图表标签
图表元素

窗格

窗格允许您将图表区域划分为两个或多个可以共享一个公共类别轴的图表。这是比较相关趋势的好方法。

参见Angular图表窗格演示
角形图表窗格
图表元素

情节乐队

图带允许你在X轴和y轴上突出显示一个特定的范围。这样你就可以展示一系列好的或坏的数字,或者把注意力吸引到Angular图表的某个区域。你可以在一个Angular Chart中定义无限数量的图带。

参见Angular Chart Plot Bands演示
角图带
图表元素

选择

Angular图表的Kendo UI允许用户在图表中选择单个或一组数据点。您可以通过在图表的大片区域上拖动鼠标或使用包含拖拽句柄的选择覆盖层来单击一次选择数据项,以帮助修改选择的范围。

参见Angular图表选择演示
角图选择
图表元素

工具提示

使用工具提示可以交互式地为用户提供有关Angular图表中不一定会显示的特定值或字段的额外信息。鼠标悬停在特定的图表元素上可以显示工具提示。还可以显示带有一组随着鼠标移动的准星的工具提示,以指示鼠标指针位置的当前X和Y值。

参见Angular图表工具提示演示
Angular图表工具提示
全球化

国际化

Angular Chart库完全支持国际化和本地化。可以翻译消息,并且符号符合区域设置。

阅读剑道UI国际化文档
Angular Chart国际化
全球化

从右到左的支持

您可以启用RTL模式,以便从左到右显示控件的文本和UI元素。

Angular图表从右向左支持
数据绑定

灵活的数据绑定

你可以轻松灵活地将Angular Chart组件的Kendo UI绑定到各种形式的数据。这包括绑定到X和Y值的简单数组,以及绑定到更高级的数据类型和带字段的对象。数据绑定提供了几个有用的配置选项,用于绑定到日期。

参见Angular图表数据绑定演示
角图表数据绑定
inverted-top-curve-blue

为什么开发者喜欢为Angular Chart使用Kendo UI

  • 用于维护和可伸缩性的TypeScript
  • 燃烧的性能
  • 完整的可访问性
  • 文档和演示
  • 响应设计
  • 本土化与全球化
  • 定制的一切
  • 主题和设计系统
  • 在Kendo UI中集成Angular的其他组件
用于Angular图表的剑道UI

剑道UI优势

我们投入了大量的精力来确保你使用Angular图表的体验是成功和愉快的。我们不断地发布资源,完善我们的文档和演示,甚至在Twitch上播放。以下是一些最受欢迎的资源。

常见问题

  • 是什么让Angular图表组件的Kendo UI变得更好?
  • Angular图表组件的Kendo UI有哪些常见用例?
  • 我可以试试Angular图表组件的Kendo UI吗?
Baidu
map