标签: recharts

由于还不熟悉 Typescript，我正在尝试使用Typescript 在我的 React 应用程序中为我的 Recharts 图表创建自定义工具提示内容。@types/recharts已作为 a 之一安装devDependencies。

但是，当我定义CustomTooltip如下所示的函数时，Typescript 抛出错误

绑定元素“active”隐式具有“any”类型。TS7031

我们该如何解决这个问题呢？

const CustomTooltip = ({ active, payload, label }) => {
    if (active) {
        return (
        <div className="custom-tooltip">
            <p className="label">{`${label} : ${payload[0].value}`}</p>
            <p className="desc">Anything you want can be displayed here.</p>
        </div>
        );
    }

    return null;
}

return (
    <ComposedChart data={data}>
        ...
        <Tooltip content={<CustomTooltip />} />
    </ComposedChart>
)

尝试定义接口，但出现另一个错误

类型“{}”缺少类型“ICustomToolip”中的以下属性：活动、有效负载、标签 TS2739

interface ICustomToolip {
    active: any;
    payload: any;
    label: any;
}

const …

我看到了一些此类问题，但没有一个真正解决我的问题。我正在使用next.js（使用打字稿）开发一个网络应用程序。在我的应用程序中使用recharts，但编译失败并出现以下错误：

Error: Must use import to load ES Module: project_path\node_modules\d3-shape\src\index.js
require() of ES modules is not supported.
require() of project_path\node_modules\d3-shape\src\index.js from project_path\node_modules\recharts\lib\shape\Symbols.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from project_path\node_modules\d3-shape\package.json.

现在，我使用 next.js 12，它支持开箱即用的 ES …

我的recharts组件有一个非常直接的数据数组:

{name: '12.1.2011', series1: 4000, series2: 2400, series3: 2400},
{name: '12.2.2011', series1: 3000, series2: 1398, series3: 2210},
{name: '12.3.2011', series1: 2000, series2: 9800, series3: 2290}

我想在Legend中为系列值添加标签.而不是图表显示"series1","series2"和"series3"的不同颜色.

当然我可以在JSON中设置我想用于传说的实际值,但这看起来并不合适.例如:

{name: '12.1.2011', 'My nice long descriptive text': 4000, 'Some other text': 2400, 'Some other descriptive text': 2400},
{name: '12.2.2011', 'My nice long descriptive text': 3000, 'Some other text': 1398, 'Some other descriptive text: 2210},
{name: '12.3.2011', 'My nice long descriptive text': 2000, 'Some other text': 9800, 'Some other descriptive text: 2290} …

如何设置钢筋的粗细？

<ResponsiveContainer width='100%' aspect={4.0 / 3.0}>
                        <BarChart data={data} layout="vertical">
                            <XAxis type="number" hide />
                            <YAxis dataKey="name" hide reversed type="category" />
                            <Tooltip />
                            <Legend />
                            <Bar legendType="star" dataKey="1" fill="#ff6f31" />
                            <Bar legendType="star" dataKey="2" fill="#ff9f02" />
                            <Bar legendType="star" dataKey="3" fill="#ffcf02" />
                            <Bar legendType="star" dataKey="4" fill="#99cc00" />
                            <Bar legendType="star" dataKey="5" fill="#88b131" />
                        </BarChart>
                    </ResponsiveContainer>

当前结果

数据集

[{1: 0, name: "1"},
{2: 0, name: "2"},
{3: 1, name: "3"},
{4: 1, name: "4"},
{5: 2, name: "5"}]

无法弄清楚如何使用http://recharts.org/设置Y轴的范围

希望Y轴在其范围内显示100而不是当前的60.

在这种特定情况下,不需要Belive代码示例或填充目的

我正在尝试学习如何使用Rechart。该文档说您可以在图表元素上放置标签，并举例说明如何使用“名称”作为标签数据键。

我试图在我的图表中执行此操作，但是它不起作用。

如果我从字段中删除“标签”，则不会显示任何标签。如果我保留它，那么显示的唯一标签就是饼图楔形上的值。

我有一个标签，其数据键为“名称”（根据文档），但未在图表上呈现。

import React, { PureComponent } from 'react';
import {
  ResponsiveContainer, PieChart, Pie, Legend, Label, LabelList
} from 'recharts';

const data = [
  { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 },
];

export default class Example extends PureComponent {
  static jsfiddleUrl = '//jsfiddle.net/alidingling/6okmehja/';

  render() {
    return (
      <div style={{ width: '100%', height: 300 }}>
        <ResponsiveContainer>
          <PieChart>
            <Pie …

我想在由条形图和线条组成的组合图表上绘制数据点，每个条形图都有自己的数据集。

例如，我希望每个 Bar 从 中获取一个值data.points，而 Lines 从一个对象数组中获取它们的值，data.content.

这两个数据集是有区别的，尽管它们都是时间序列。

数据形状示例：

const data = {
    points: [{
        value: 80,
        timestamp: 2010-01-09
    }],
    content: [{
        date_posted: 2010-01-10,
        content_id: 'xewr23r3g29w0'   
    }]
}

我是否能够为每个图表组件单独使用这些数据集，还是必须遍历数据并以某种方式将其标准化？

同样供参考的是我的ComposedChart.

<ComposedChart width={600} height={400} data={data} margin={margin} legendType="circle">
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="timestamp" tickFormatter={this.formatDate} height={40} />
  <YAxis />
  <Legend iconType="circle" />
  <Bar dataKey="content_id" barSize={20} fill="#413ea0" />
  <Line name="Selected Period" type="monotone" dataKey="value" stroke={colors.blue} />
</ComposedChart>

有没有办法关闭Recharts 中条形图悬停时出现的灰色背景？

使用版本 1.4.1。代码（简化）如下所示：

import React from "react"

// Recharts
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

import CustomTooltip from "../CustomTooltip"

const BarChart = ({ chartData, chartInfo }) => (
  <ResponsiveContainer width="99%" height={260}>
    <BarChart data={chartData}>
      <XAxis
        dataKey="label"
        type="category"
        allowDuplicatedCategory={true}
        tickLine={false}
        orientation="bottom"
      />

      <YAxis
        tickLine={false}
        orientation="left"
        axisLine={false}
      />

      <Tooltip
        isAnimationActive={false}
        separator={": "}
        content={<CustomTooltip />}
      />

      <CartesianGrid vertical={false} />

      {chartInfo.map(bar => (
        <Bar
          key={bar.dataKey}
          name={bar.name}
          dataKey={bar.dataKey}
          isAnimationActive={false}
        />
      ))}
    </BarChart>
  </ResponsiveContainer>
)

export default BarChart …

在Recharts<ResponsiveContainer>中使用时，它会呈现出现在其中图表周围的类似填充的空白。

这个问题可以在这里重现：https ://codesandbox.io/s/ykq2q0z871

[请注意 的红色边框<ResponsiveContainer>和蓝色边框之间的空格<LineChart>。]

如何删除它，以便折线图在红色框中从边到边呈现？

所以我使用recharts创建了这个图表：

有没有办法删除 YAxis 线但保持值可见？比如删除线路但保留 135、190 等。

<div className={styles.lineChart}>
  <h3 className={styles.title}>Body Weight</h3>
  <LineChart
    width={800}
    height={300}
    data={props.data}
    margin={{
      top: 5, right: 30, left: 20, bottom: 5,
    }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="day" />
    <YAxis />
    <Tooltip />
    <Legend  layout="horizontal" verticalAlign="top" align="center"/>
    <Line type="monotone" dataKey="body weight" stroke="#57c0e8" activeDot={{ r: 8 }} />
  </LineChart>
</div>