npm 包 kendo-ui-react-jquery-sparklines 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，常常会需要绘制图表来展示数据。kendo-ui-react-jquery-sparklines 是一个 npm 包，它是基于 React 和 Kendo UI Chart 封装的一个小型组件库，为开发者提供了一种快速简单地绘制图表的方式。

在本文中，我们将详细介绍如何使用 kendo-ui-react-jquery-sparklines 组件，包含其相关的 API 和示例代码。同时，对于初学者来说，本文也会详细介绍基于 React 和 Kendo UI Chart 如何绘制一个简单的折线图。

安装

首先，我们需要安装需要使用的 npm 包。可以通过以下命令进行安装：

npm install kendo-ui-react-jquery-sparklines --save

使用

导入

在需要使用 kendo-ui-react-jquery-sparklines 的组件中，需要导入它：

import React from 'react';
import ReactDOM from 'react-dom';
import SparklinesChart from 'kendo-ui-react-jquery-sparklines';

代码

接下来，我们可以在 render 函数中使用 SparklinesChart 组件。例如，在下面的示例中，我们绘制了一个折线图：

-- -------------------- ---- -------
----- --- ------- --------------- -
  ------------------ -
    -------------
    ---------- - -
      ----- --- -- -- -- -- -- -- -- -- ----
    --
  -

  -------- -
    ----- - ---- - - -----------

    ------ -
      -----
        -------------- ----------
        ----------------
          -------- ------- -------- ------ ------- --
          -----------
          ---------------
            ------------- ------------
            ------- -
              ------ --------
            --
            ------------- -
              ------- -
                -------- ------
              --
            --
            --------------- -
              ----- -------
              -------- -
                -------- ------
              --
            --
          --
        --
      ------
    --
  -
-

-------------------- --- ---------------------------------

在上面的代码中，我们首先在 constructor 函数中初始化了 state 数据 data，然后在 render 函数中使用，将它作为数据传递给了 SparklinesChart 组件。同时，我们还设置了 SparklinesChart 组件的一些属性，包括风格、Chart 相关的选项等等。

接下来，我们将详细介绍 SparklinesChart 组件的 API。

API

Properties

SparklinesChart 属性：

名称	类型	默认值	描述
data	Array	[]	图表数据
chartOptions	Object	{}	图表配置选项
height	String	'100%'	图表高度
width	String	'100%'	图表宽度
onSeriesClick	Function	() => {}	点击图表系列触发的回调函数
onSeriesOver	Function	() => {}	鼠标移动到图表某个系列上时触发的回调函数
onSeriesOut	Function	() => {}	鼠标移开图表某个系列时触发的回调函数
onSeriesHover	Function	() => {}	鼠标悬停在系列上时触发的回调函数
tooltip	Object	null	配置 Chart 工具提示
renderAsImageData	Boolean	true	将图表渲染为图像数据格式渲染器，可用于导出到图片或 PDF 中
// Kendo UI Event
render	Function	null	图表渲染事件
dataBound	Function	null	数据绑定事件
seriesClick	Function	null	系列单击事件
seriesHover	Function	null	系列悬停事件
seriesOver	Function	null	系列鼠标进入事件
seriesOut	Function	null	系列鼠标离开事件
dragStart	Function	null	拖拽开始事件
drag	Function	null	拖拽事件
dragEnd	Function	null	拖拽结束事件

chartOptions

chartOptions 主要用于配置 Chart 组件的相关选项。

名称	类型	描述
axisDefaults	Object	轴配置
categoryAxis	Object	坐标轴分类配置项
chartArea	Object	图表绘图区域的配置项
legend	Object	图例配置项
plotArea	Object	绘图区域配置项
series	Array	系列配置项
seriesColors	Array	系列颜色
seriesDefaults	Object	系列默认配置项
theme	String	图表主题
themes	Object	系列中的主题
title	String	图表标题
titleConfiguration	Object	图表标题配置项
tooltip	Object	图表提示工具
valueAxis	Object	坐标轴值配置项
xAxis	Object	X 轴配置项
yAxis	Object	Y 轴配置项
zoomable	Boolean	是否支持缩放
pannable	Boolean	是否支持移动
axisDefaults	Object	轴默认配置项
chartAreaDefaults	Object	图表绘图区域的默认配置项
legendDefaults	Object	图例的默认配置项
plotAreaDefaults	Object	绘图区域的默认配置项
titleDefaults	Object	标题的默认配置项
tooltipDefaults	Object	工具提示的默认配置项
valueAxisDefaults	Object	Y 轴的默认配置项
xAxisDefaults	Object	X 轴的默认配置项
yAxisDefaults	Object	Y 轴的默认配置项

Series 配置

Series 配置主要用于配置 Chart 组件的系列的相关配置项。

名称	类型	描述
field	String	系列绑定的数据字段名
color	String	系列颜色
type	String	系列类型
aggregate	Function	数据聚合函数
axis	String	坐标轴名称
border	Object	系列边框设置
bullet	Object	系列 Bullet 样式
categoryAxis	String	类别轴名称
clip	Boolean	是否启用裁剪
colorField	String	系列颜色绑定的字段名称
gap	Number	系列间距
high	Number	高点
highlight	Object	高亮系列配置项
labels	Object	数据标签
line	Object	线性系列配置项
markers	Object	标记设置
median	Object	中位数配置项
mean	Object	均值配置项
outliers	Object	异常值配置项
overlay	Object	系列指定覆盖线
size	String	图标尺寸
stack	Object	堆栈配置项
style	Object	系列样式
tooltip	Object	工具提示
visible	Boolean	是否可见
width	Number	线型宽度
zIndex	Number	系列布局顺序
highlightMatch	String	高亮匹配项
highlightMissingValues	Boolean	是否高亮缺失数据点
missingValues	String	缺失的数据点设置项
opacity	Number	系列不透明度
noteTextField	String	请注意文本字段名称
notes	Array<object>	请注意的数据点
outliersField	String	异常值绑定的数据字段名
outliersDisplay	String	异常值的显示方式
overlaidSeries	Array<object>	与其覆盖的系列
selectionMode	String	系列选择模式
stackGroup	String	隐藏的分组，该分组中所有系列都将堆叠
tooltipTemplate	String	工具提示模板
transparency	Number	系列透明度
highlightTransparency	Number	高亮系列的透明度
lineDefaults	Object	线性系列的默认配置项
markersDefaults	Object	标记的默认配置项
highlightDefaults	Object	高亮系列的默认配置项
tooltipDefaults	Object	工具提示的默认配置项

示例

下面我们做一个基于 React 和 Kendo UI Chart 绘制的一个折线图。

首先，安装需要的 npm 包：

npm install kendo-ui-core --save

接下来，我们新建一个 LineChart.js 文件，并引入必要的依赖：

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----- ---- ----------------

----- --------- ------- --------------- -
  ------------------- -
    ----- - ---- - - -----------

    -- ------ --- --- -------
    ----- -------- - ---------------------------

    -- ---------- --- -----
    --------------------- -
      ------ -
        ----- ----- -------
      --
      ------- -
        --------- ------
      --
      ------------- -
        ----------- ------------ -- - ---- ------
      --
      --------------- -
        ----- -------
        -------- -
          -------- ------
        --
      --
      ------- -
        -
          ----- ------- --- -- ------ - ----
          ----- ------------- -- ------ - ----
        --
        -
          ----- ------- --- -- ------ - ----
          ----- ------------- -- ------ - ----
        --
      --
      ---------- -
        -
          ----- ------ ------ -- - ---- -----
        --
      --
      -------- -
        -------- -----
      --
    ---
  -

  -------- -
    ------ ---- ----------------- ---
  -
-

------ ------- ----------

在上面的代码中，我们首先在 componentDidMount 函数中初始化了 Kendo UI Chart 组件，并绑定了待绘制的图表数据，包括 X 轴标签、系列 A 和系列 B 的数据等等。同时，我们还设置了 Kendo UI Chart 组件的一些属性，如标题、图例位置、图表类型、鼠标提示等等。最后，我们将 Kendo UI Chart 组件的 DOM 节点渲染出来。

接下来，我们在 Index.js 文件中完成 LineChart 组件的渲染。代码如下：

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --------- ---- --------------

----- --- ------- --------------- -
  ------------------ -
    -------------
    ---------- - -
      ----- -
        ------- -------- ------- ------- ------- ------- ------- --------
        -------- --- --- --- --- -- -- ----
        -------- ---- -- -- --- --- -- ---
      --
    --
  -

  -------- -
    ----- - ---- - - -----------
    ------ -
      -----
        -------- ----------
        ---------- ----------- --
      ------
    --
  -
-

-------------------- --- ---------------------------------

在上面的代码中，我们定义了 Chart 组件所需的数据 data，并将它作为 props 传递给 LineChart 组件。

最后，在浏览器中查看，即可看到 Kendo UI Chart 绘制的折线图：

总结

在本文中，我们详细介绍了如何使用 npm 包 kendo-ui-react-jquery-sparklines 组件绘制图表。同时，我们还通过一个示例示范了如何使用 React 和 Kendo UI Chart 组件绘制一个折线图，对于初学者来说，也许这更有参考意义。希望这篇文章对你有所帮助。

参考文献

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066efb4c49986ca68d892c