antd chars柱状图

使用 Ant Design Charts 实现柱状图可以按照以下步骤进行：

1. 安装 Ant Design Charts

npm install @ant-design/charts --save

2. 导入并使用 Bar 组件

import React from 'react';
import { Bar } from '@ant-design/charts';

const data = [
  { year: '2001', sales: 38 },
  { year: '2002', sales: 52 },
  { year: '2003', sales: 61 },
  { year: '2004', sales: 145 },
  { year: '2005', sales: 48 },
];

const ChartDemo = () => {
  const config = {
    data,
    xField: 'year',
    yField: 'sales',
    height: 400,
  };

  return <Bar {...config} />;
};

export default ChartDemo;

3. 根据需求设置其他属性

Bar 组件支持多种属性设置，比如标题、颜色、柱状体宽度等等。具体可以参考 Ant Design Charts 的文档。

相关问题

antd chars柱状图y轴属性

Ant Design Charts 的柱状图组件中，y 轴属性可以通过 `yAxis` 进行设置。`yAxis` 是一个对象，包含以下属性：

- `title`: y 轴标题，类型为字符串。
- `label`: y 轴标签配置，包含以下属性：
- `formatter`: 标签格式化函数，类型为 `(text: string, item: any, index: number) => string`。
- `style`: 标签样式配置，类型为对象。
- `grid`: y 轴网格线配置，包含以下属性：
- `line`: 网格线样式配置，类型为对象。
- `line`: y 轴轴线配置，包含以下属性：
- `style`: 轴线样式配置，类型为对象。

示例代码：

import { ColumnChart } from '@opd/g2plot-react';
const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];
const config = {
  data,
  xField: 'year',
  yField: 'value',
  yAxis: {
    title: '销售额',
    label: {
      formatter: (text, item, index) => {
        return `${text} 万元`;
      },
      style: {
        fill: 'red',
      },
    },
    grid: {
      line: {
        style: {
          stroke: 'grey',
          lineWidth: 1,
          lineDash: [2, 2],
        },
      },
    },
    line: {
      style: {
        stroke: 'black',
        lineWidth: 2,
      },
    },
  },
};
<ColumnChart {...config} />;

这段代码将生成一个带有 y 轴标题、标签格式化、网格线和轴线的柱状图。你可以根据自己的需求调整这些属性的值。

antd charts 柱状图自定义y轴刻度

如果你想自定义 y 轴的刻度，可以使用 `yAxis` 组件中的 `ticks` 属性来实现。你需要指定一个数组，该数组包含你想要显示的所有刻度值。例如，以下代码将 y 轴的刻度设置为 `[0, 20, 40, 60, 80, 100]`：

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Interval, Axis, Tooltip, Legend } from 'bizcharts';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];

const cols = {
  sales: {
    tickInterval: 20,
  },
};

const CustomYAxisTick = (props) => {
  const { x, y, payload } = props;

  return (
    <g transform={`translate(${x},${y})`}>
      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">
        {payload.value}
      </text>
    </g>
  );
};

ReactDOM.render(
  <Chart height={400} data={data} scale={cols} forceFit>
    <Interval position="year*sales" />
    <Axis name="year" />
    <Axis name="sales" ticks={[0, 20, 40, 60, 80, 100]} />
    <Tooltip />
  </Chart>,
  mountNode
);

在上述代码中，我们使用 `ticks` 属性将 y 轴刻度设置为 `[0, 20, 40, 60, 80, 100]`。此外，我们还定义了一个 `CustomYAxisTick` 组件，该组件负责渲染每个刻度的标签。你可以根据需要自定义这个组件的样式和布局。

另外，我们还使用了 `tickInterval` 属性来设置刻度之间的间隔。在这个例子中，我们将它设置为 20，这意味着每个刻度之间的间隔为 20。你可以根据需要调整这个值。