反应图

Plot Bands支持在任意轴(X轴和Y轴)上突出显示特定范围，以显示与所显示系列相关的附加信息。这在尝试展示一系列好的或坏的数据时非常有用，或者只是为React Chart的某个区域提供关注。在KendoReact Chart组件中，可以在单个图表中定义的不同图表频带的数量没有限制。

参见React Charts Plot Bands演示

KendoReact图表自带内置的用户体验，用于在图表中选择单个数据点或数据范围。可以使用单个属性启用选择，启用后将显示一个可见区域，以指示图表的当前选择。然后，可以通过使用内置的拖动手柄、滚动轮、单击图表区域的其他地方或拖动选择区域来修改这个选择。选定的数据点可以通过编程方式提取，并在React应用程序的其他地方使用。

参见React Charts Selection演示

虽然KendoReact图表通常显示在桌面浏览器中，但它们完全支持在移动设备上呈现。除了像正常一样渲染图表，KendoReact图表有处理调整大小和响应式设计的内置逻辑。这包括旋转不同轴上的标签，以及使图表区域内显示的内容更小以适应可用的大小——所有这些都不需要编写任何额外的逻辑。

React应用程序中的数据可视化通常有两种形式:SVG或Canvas渲染。有了KendoReact Charts，没有必要只满足于一个，因为我们的React Charts可以呈现为Canvas或SVG元素。在两者之间切换就像更改单个配置选项一样简单。

参见React Charts渲染模式演示

除了在网页上显示数据可视化，每个KendoReact图表可以导出为图像、PDF或SVG元素，只需单击一个按钮!得益于与KendoReact Drawing包的集成，可以调用单个方法导出整个React图表，并让最终用户在本地保存文件。

参见React Charts Export Options演示

KendoReact中的React Chart组件是一个强大的数据可视化工具，可以适合任何应用程序。这个组件包含了超过16种不同类型的图表，所有图表都内置了对交互性、工具提示、缩放和平移等的支持。这个React图表库是从头开始构建的，不依赖任何第三方库。每个图表都可以呈现为SVG或Canvas元素，由单个属性定义，并可以导出为各种格式，如图像或PDF。

参见React Charts演示

KendoReact Charts组件的每个方面都可以完全定制。定制的选项包括使用自定义渲染器、提供自定义CSS，或者只是定义一个可以在图表的各个元素中重用的模板。

参见React Charts自定义渲染演示

KendoReact Chart组件有一个很长的可用图表和系列类型列表。它们作为独立的系列可以很好地工作，许多可以混合和匹配，并在一个单一的图表中呈现。可用的图表类型包括:

• 面积图
• 条形图
• 箱形图
• 气泡图
• 子弹图表
• 甜甜圈图
• 漏斗图
• 折线图
• 饼状图
• 极图
• 雷达图表
• 范围分布图
• 距离柱状图
• 散点图
• 股票图表
• 瀑布图

在不到10分钟的时间内，学习如何实现React Charts到您的应用程序使用KendoReact图表库。

TJ VanToll创建了这个易于学习的教程，演示了如何用几行代码，就可以定制一个具有动画、标题、自定义轴、图表图例和工具提示的好看的图表。

使用KendoReact图表库的React图表教程(视频)

KendoReact Chart可以绑定到各种形式的数据，从具有X和Y值的简单数组，到更高级的数据类型和具有表示需要显示的值的字段的对象。此外，React Chart组件可以很容易地绑定到日期，并且有内置的方法来处理应该在轴上显示哪天或哪月。

参见React Charts数据类型绑定演示

传统的图表只包含一个序列，X轴和Y轴从0开始。对于需要在同一个图表中使用多个系列的场景，包括使用多个轴显示不同的值和比例，KendoReact图表可以帮助您解决这些问题。定义多个级数或多个轴与定义第一个级数或多个轴一样容易。

数据可视化不仅仅是显示数据。在从最低值到最高值的渲染过程中为一个系列动画化，或者让条形动画化——每次一个，这些都是小的调整，可以使任何图表流行起来，并在视觉上取悦最终用户。KendoReact图表自带默认启用的内置动画，但任何动画都可以完全控制，可以在粒度级别上打开或关闭。

对于大量数据，在一个图表区域内显示所有内容可能并不总是可行的。这就是平移和缩放等功能发挥作用的地方。平移允许用户在轴上水平滚动，向左或向右移动，并轻松地在大型数据集中导航。缩放可以通过鼠标滚轮或通过选择KendoReact图表上的一个区域移动或移出图表的某个区域。

参见React Charts平移和缩放演示

KendoReact图表的构建部分被分解为不同的元素。这包括轴、图表区域、标签、图例、情节带、标题和图表的其他方面。这种细分使开发人员能够自定义图表的各个方面并与之交互。

KendoReact图表内置支持各种图表类型的工具提示。当鼠标悬停在图表的单个点上时，这个React工具提示就会出现，或者当用户在图表区域移动鼠标时，会沿着一组十字准星不断显示。默认情况下，这些工具提示可以绑定到来自底层数据模型的字段，但也可以通过工具提示元素的自定义呈现器对它们进行自定义，以包含完全惟一的布局。

参见React Charts工具提示演示

标签分散在KendoReact图的各个地方，包括显示在图表区域内的系列数据点旁边，以及每个显示的轴上。通过利用每个标签的内置属性，可以很容易地自定义这些标签，并且每个标签被分解到React Chart中的一个组件中，以便尽可能容易地根据需要修改特定的标签。

参见React Charts标签演示

在某些情况下，图表中显示的数据点可能有一定的误差范围，实际上可能落在一个可能的值范围内。这就是React Error bar发挥作用的地方。在KendoReact图中，值可以具有与每个值相关联的定义的高和低字段，允许指示器显示所呈现的数据点在可能值范围内的位置。

参见反应图表错误条演示

对于繁忙或大型图表，可能很难看到特定数据点的特定X和Y值。得益于React Chart组件内置的十字准星功能，横过X轴和Y轴的线会跟随鼠标指针，并沿此方向显示当前的X和Y值。启用此功能非常简单，只需设置React Chart组件的单个属性即可。

参见React Charts十字瞄准演示

KendoReact图表的图例区域可以根据绑定到图表的系列自动生成，给出了绑定到什么颜色和类型的系列和数据的简单表示。此外，React Chart Legend还内置了交互性，提供了一些功能，如单击系列名称来在购物车中显示或隐藏系列。

参见React Charts Legend演示