Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
chart-render
Advanced tools
<span style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px"
易用的中后台图表解决方案,常用于图表展示页快速生成
https://x-render.gitee.io/chart-render
meta
、data
即可出图。chart-render 依赖 ant design,单独使用不要忘记安装~
$ npm install chart-render --save
/**
* transform: true
* defaultShowCode: true
*/
import React, { useState } from 'react';
import { Line, Column, PivotTable, } from 'chart-render';
export default () => {
const [component, setComponent] = useState('Line');
const ChartRender = { Line, Column, PivotTable }[component];
return (
<div>
<div style={{ marginBottom: 10 }}>
<button
style={{ marginRight: 10 }}
className="ant-btn ant-btn-primary"
onClick={() => setComponent('Line')}
>
折线图
</button>
<button
style={{ marginRight: 10 }}
className="ant-btn ant-btn-primary"
onClick={() => setComponent('Column')}
>
柱状图
</button>
<button
style={{ marginRight: 10 }}
className="ant-btn ant-btn-primary"
onClick={() => setComponent('PivotTable')}
>
交叉表
</button>
</div>
<ChartRender
meta={[
{ id: 'date', name: '日期', isDim: true },
{ id: 'pv', name: '访问量', isDim: false },
{ id: 'uv', name: '访客数', isDim: false },
]}
data={[
{ date: '20200101', pv: 100, uv: 50 },
{ date: '20200102', pv: 120, uv: 60 },
{ date: '20200103', pv: 140, uv: 70 },
{ date: '20200104', pv: 160, uv: 80 },
]}
/>
</div>
);
};
所有的图表组件都有以下 4 个入参(data
和 meta
是必传的参数,请务必注意):
参数 | 说明 | 类型 | 是否必填 |
---|---|---|---|
style | 最外层容器的样式 | React.CSSProperties | 否 |
className | 最外层容器的类名 | string | 否 |
data | 数据配置项 注1 | IDataItem[] | 是 |
meta | 元数据配置项 注2 | IMetaItem[] | 是 |
是普通的对象数组,形如:
[
{ date: '20200101', pv: 100, uv: 50 },
{ date: '20200102', pv: 120, uv: 60 },
{ date: '20200103', pv: 140, uv: 70 },
{ date: '20200104', pv: 160, uv: 80 },
]
用来描述 data 的各个字段的东西,形如:
/**
* id: 对应单条数据项的 key 名
* name: 对应单条数据项的 key 的描述
* isDim: 是否是维度,`true`-维度,`false`-指标
* isRate: 是否是百分数,仅限指标使用,启用后,数值 `0.5` 会以 `50%` 来输出渲染
*/
[
{ id: 'date', name: '日期', isDim: true, isRate: false },
{ id: 'pv', name: '访问量', isDim: false, isRate: false },
{ id: 'uv', name: '访客数', isDim: false, isRate: false },
]
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
withArea | 是否以面积图展示 - 注意面积图默认堆叠展示,如不需要可以传入 isStack={false} 覆盖- 开启面积图后方可使用 areaStyle startOnZero isPercent 属性 | boolean | false | 否 |
如果你需要修改点、线等样式,可以参考参数表:折线图参数表 面积图参数表,除了 yField
、xField
、seriesField
三个字段不做透传,其他字段均做透传处理。
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
inverted | 是否以条形图展示 | boolean | false | 否 |
如果你需要修改颜色、柱等样式,可以参考参数表:柱状图参数表,除了 yField
、xField
、seriesField
三个字段不做透传,其他字段均做透传处理。
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
showSubtotal | 是否展示总计小计 | boolean | true | 否 |
subtotalText | 总计小计的文案 | [string, string] | ['总计', '小计'] | 否 |
indicatorSide | 指标的展示位置 | 'left' | 'top' | 'top' | 否 |
size | 表格尺寸 | 'small' | 'middle' | 'large' | 'middle' | 否 |
leftDimensionLength | 左侧维度放多少个,超出的维度会放到表格顶部 | number | - | 否 |
leftExpandable | 左侧维度允许展开/收起 | boolean | false | 否 |
topExpandable | 顶部维度允许展开/收起 | boolean | false | 否 |
cellRender | 单元格自定义渲染函数,可见交叉表案例 - 高级案例 - 自定义单元格渲染 | (value: any, dimRecord: IDataItem, indId: string ) => React.ReactNode | - | 否 |
FAQs
C
The npm package chart-render receives a total of 3 weekly downloads. As such, chart-render popularity was classified as not popular.
We found that chart-render demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.