npm 包 c3-react 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

c3-react 是一个基于 c3.js 开发的 React 组件库，能够帮助前端开发人员快速地集成各种图表组件。通过使用 c3-react，用户可以快速地创建可交互的、自适应的图表。

安装

使用 npm 进行安装：

npm install c3-react --save

快速入门

引入

import React from "react";
import ReactDOM from "react-dom";
import C3Chart from "c3-react";

配置数据

const data = {
  columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25],
  ],
};

渲染图表

ReactDOM.render(
  <C3Chart data={data} />,
  document.getElementById("root")
);

以上示例演示了如何在 React 应用中使用 c3-react 库，在 <C3Chart> 组件中传递数据，并且渲染出一个基本的图表。

API

属性

以下是 <C3Chart> 组件支持的属性列表。

属性	类型	默认值	说明
data	object		数据配置对象，包括列、行数据
axis	object	{}	坐标轴配置对象，可以配置 x 轴、y 轴、y2 轴的多项属性，详见下面的配置说明
grid	object	{}	网格线配置对象，可以配置 x 轴、y 轴对应的水平、垂直网格线的样式
legend	object	{}	图例配置对象，可以配置位置、布局等多项属性
tooltip	object	{}	提示框配置对象，可以配置展示位置、自定义展示内容等多项属性
zoom	object	{}	缩放配置对象，可以配置缩放范围、缩放类型等多项属性
subchart	object	{}	副图形配置对象
size	object	{}	图形尺寸配置对象，可以配置宽度、高度等多项属性
padding	object	{}	内边距配置对象，可以配置图形周围的内边距
color	object	{}	颜色配置对象，可以配置默认颜色、图例颜色等，也可以使用回调函数动态返回颜色
transition	object	{}	过渡配置对象，可以配置过渡时间、动画类型等
onrendered	func		图形渲染完成后的回调函数
onresized	func		图形尺寸改变后的回调函数
onmouseover	func		鼠标移入图形元素时的回调函数
onmouseout	func		鼠标移出图形元素时的回调函数
onresize	func		尺寸改变时的回调函数
onrescale	func		缩放变化时的回调函数
oninit	func		图形初始化完成后的回调函数
dataFormat	string	json	数据格式，默认为 json
unloadBeforeLoad	bool	false	图表在加载前是否清空。默认为 `false` 。设置为 `true` 时，将在加载数据前清空图表并显示 `loading icon` ，在加载完成后再渲染图表。如需在切换数据时保持数据加载前的状态可使用此配置。

坐标轴配置

以下是坐标轴配置对象支持的属性列表。

x 轴属性

属性	类型	默认值	说明
type	string	"indexed"	x 轴的类型，可选值为： "indexed", "timeseries", 和 "category"
categories	array	[]	x 轴的分类数据
tick	object or function	{}	x 轴的标签配置对象或标签生成函数，详见下面的配置说明
label	string		x 轴的标签文本

y 轴属性

属性	类型	默认值	说明
show	bool	false	是否显示
min	number		y 轴最小值
max	number		y 轴最大值
default	array of objects or array		y 轴的默认值，若使用此项则需与 columns 参数配合使用，详见下面的使用说明
label	string		y 轴的标签文本
position	string	left	y 温度轴的位置，可选值为： "left", "right", 和 "y2"
inverted	bool	false	是否将 y 温度轴反转
center	number or object		用于分散数据在y轴上。可以传入数字、图表宽度的百分比（字符串）或包含百分比的对象{value: 50, position: 'middle'}
tick	object or function	{}	y 轴的标签配置对象或标签生成函数，详见下面的配置说明
padding	object	{}	y 轴的边缘偏移量，可用于调整标签与边缘的距离
outerPadding	number		y 轴外边距

y2 轴属性

属性	类型	默认值	说明
show	bool	false	是否显示
min	number		y2 轴最小值
max	number		y2 轴最大值
default	array of objects or array		y 轴的默认值，若使用此项则需与 columns 参数配合使用，详见下面的使用说明
label	string		y2 轴的标签文本
position	string	right	y 温度轴的位置，可选值为： "left", "right", 和 "y2"
inverted	bool	false	是否将 y 温度轴反转
center	number or object		用于分散数据在y轴上。可以传入数字、图表宽度的百分比（字符串）或包含百分比的对象{value: 50, position: 'middle'}
tick	object or function	{}	y2 轴的标签配置对象或标签生成函数，详见下面的配置说明
padding	object	{}	y2 轴的边缘偏移量，可用于调整标签与边缘的距离
outerPadding	number		y 轴外边距

坐标轴的标签配置

属性	类型	默认值	说明
show	bool	true	是否显示坐标轴上的标签
format	func		数值格式化函数，用于返回格式化后的标签文本
count	number		坐标轴上显示的标签数量
culling	bool or object		是否启用数据截断，若启用则可配置数据截断数量
multiline	bool	false	是否允许标签文本多行展示
rotate	number	0	标签文本旋转角度
outer	bool	true	是否显示坐标轴最外侧的标签
centered	bool	false	是否将标签文本置于中心位置
position	object		坐标轴标签文本的位置，包括 x、y 两个方向的坐标值，可用来调整标签显示位置，例如： `{ x: 0, y: 10 }` 表示在 x 轴，距离起点 0 处的标签位置向下偏移 10 个单位

网格线配置

属性	类型	默认值	说明
x	object	{}	x 轴网格线配置对象，详见下面的配置说明
y	object	{}	y 轴网格线配置对象，详见下面的配置说明

x/y 轴网格线配置

属性	类型	默认值	说明
show	bool	false	是否显示网格线
lines	array	[]	网格线的位置信息

图例配置

属性	类型	默认值	说明
show	bool	true	是否显示图例
position	string	bottom	图例位置，可选值为： "right”, “bottom”, “inset”和“none”
inset	object	{}	插入图例的大小和相对位置，适用于 position: "inset"
item	object	{}	图例项的样式和布局，详见下面的配置说明
padding	object	{}	图例周围的内边距
maxItemWidth	number		图例项的最大宽度

图例项配置

属性	类型	默认值	说明
width	number		图例项宽度
height	number		图例项高度
tile	bool	false	是否显示方块填充
padding	number		图例项周围的内边距
radius	number		图例项圆角半径
textColor	object	{}	图例项文本颜色
onClick	func		点击图例项后触发回调函数
onMouseover	func		鼠标移入图例项时触发回调函数
onMouseout	func		鼠标移出图例项时触发回调函数

提示框配置

属性	类型	默认值	说明
show	bool	true	是否显示提示框
grouped	bool	false	是否分组显示提示框内容
format	object or function		用于格式化提示框内容的配置对象或函数，详见下面的配置说明
contents	object or function		自定义提示框渲染内容的配置对象或函数，详见下面的配置说明
position	object		提示框位置的配置对象，包括 x、y 坐标值，可用于自定义位置
backgroundColor	string	null	提示框的背景颜色
border	object		提示框的边框样式配置对象，包括颜色、宽度等
contents	function		提示框展示阈值的自定义配置函数，传入参数为返回值函数

格式化提示框格式

属性	类型	说明
title	string	提示框的标题文本
value	string or number	提示框的数值文本
name	string	提示框的名称或分类文本，通常用于饼图等展示不同类别数据的图形
position	object	提示框的位置，包括 x、y 两个属性，可用于调整位置
colors	object	提示框的颜色配置对象，包括背景色和字体颜色

自定义提示框渲染内容

可以通过一个函数来自定义提示框的内容：

const contents = (d, defaultTitleFormat, defaultValueFormat, color) => {
  const formatTitle = defaultTitleFormat;
  const formatValue = defaultValueFormat;
  const content = `<div class="tooltip-custom"><div class="tooltip-custom-title">${d[0].name}</div><div class="tooltip-custom-value">${formatValue(d[0].value)}</div></div>`;
  return content;
}

这样就可以使用自定义的 HTML 片段来自定义提示框的渲染内容了。

缩放配置

属性	类型	默认值	说明
enabled	bool	false	是否启用缩放组件
type	string	"scroll"	缩放类型，可选值为： "scroll" 和 "drag"
rescaleY	bool	false	是否在 x 轴缩放时同时缩放 y 轴
extent	array		缩放的范围，数组中分别为最小值和最大值的百分比，例如： `[0.2, 0.8]` 表示缩放范围从 20% 到 80%
onzoomstart	func		缩放开始时的回调函数
onzoom	func		缩放期间的回调函数
onzoomend	func		缩放结束后的回调函数

副图形配置

属性	类型	默认值	说明
show	bool	false	是否启用副图形
sizeOnly	bool	false	是否只缩放图形大小，不缩放 x 轴
xAxis	object	{}	副图形对应的 x 轴配置对象，详见下面的配置说明
yAxis	object	{}	副图形对应的 y 轴配置对象，详见下面的配置说明
brush	object	{}	刷选框的样式和事件配置对象，详见下面的配置说明
onbrushstart	func		刷选开始时的回调函数
onbrush	func		刷选期间的回调函数
onbrushend	func		刷选结束后的回调函数

副图形

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