小编dwp*_*dwp的帖子

如何在 rechart 中将工具提示放置在条形图的顶部?

问题: 我创建了一个带有自定义工具提示的条形图。现在我需要的是将工具提示放置在栏的顶部而不是图表区域内。就像这张照片一样。

在此输入图像描述

这就是现在的样子。

在此输入图像描述

在这里我提供了我如何组织我的代码。

import React, { Component } from "react";
import {
  BarChart,
  Tooltip,
  Bar,
  Legend,
  ResponsiveContainer,
  Cell
} from "recharts";

import { Card, CardTitle, CardBody } from "reactstrap";

import "./SessionDuration.css";

const colors = ["#26a0a7", "#79d69f", "#f9ec86", "#ec983d"];

const data = [
  {
    name: "Page A",
    pv: 2400,
    amt: 2400
  },
  {
    name: "Page B",
    pv: 1398,
    amt: 2210
  },
  {
    name: "Page C",
    pv: 9800,
    amt: 2290
  },
  {
    name: "Page D",
    pv: 3908,
    amt: 2000
  }
]; …
Run Code Online (Sandbox Code Playgroud)

css tooltip bar-chart recharts

8
推荐指数
2
解决办法
6903
查看次数

标签列表未显示在图表中?

问题:

我使用 rechart 创建了一个条形图。我在条形图中使用了 labelList 组件。但它没有显示我的标签。这就是我组织条形图的方式。

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

import {
  Card,
  CardBody,
  CardTitle,
  CardFooter,
  CardSubtitle
} from "reactstrap";

import {
  BarChart,
  Tooltip,
  Bar,
  ResponsiveContainer,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  LabelList
} from "recharts";

import "./MostPopularTenChannels.css";
import { get_device_width } from "../../../actions";

const data = [
  {
    name: "A",
    uv: 15.64
  },
  {
    name: "B",
    uv: 8.19
  },
  {
    name: "C",
    uv: 6.66
  },
  { …
Run Code Online (Sandbox Code Playgroud)

reactjs recharts

3
推荐指数
1
解决办法
6868
查看次数

无法在 React Native 应用程序中使用 react-navigation-tabs 导致找不到模块的问题?

问题:

我在那里创建了一个 React Native 应用程序,我正在使用 react-navigation-tab 模块。但它导致了一个错误,说明了这一点。

无法从“node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js”解析“react-native-reanimated”

这是我的 package.json 文件。

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "expo-linear-gradient": "^7.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "0.59.8",
    "react-native-elements": "^1.2.1",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.0.8",
    "react-navigation-stack": "^1.9.0",
    "react-navigation-tabs": "^2.5.5"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.0.0"
  },
  "private": true
}
Run Code Online (Sandbox Code Playgroud)

我尝试了很多在互联网上找到解决此问题的方法,但我无法这样做。有人可以帮我解决这个问题吗?谢谢你。

reactjs react-native

3
推荐指数
1
解决办法
2799
查看次数

javascript 函数不能正确使用 angular 5

我有这样的问题。我正在制作一个角度应用程序。在那里,我制作了一个动画登录。这是我的组件 HTML 文件。

<div class="panda" xmlns="">
  <div class="ear"></div>
  <div class="face">
    <div class="eye-shade"></div>
    <div class="eye-white">
      <div class="eye-ball"></div>
    </div>
    <div class="eye-shade rgt"></div>
    <div class="eye-white rgt">
      <div class="eye-ball"></div>
    </div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
  <div class="body"> </div>
  <div class="foot">
    <div class="finger"></div>
  </div>
  <div class="foot rgt">
    <div class="finger"></div>
  </div>
</div>
<form>
  <div class="hand"></div>
  <div class="hand rgt"></div>
  <h1>Panda Login</h1>
  <div class="form-group">
    <input required="required" class="form-control"/>
    <label class="form-label">Username    </label>
  </div>
  <div class="form-group">
    <input id="password" type="password" required="required" class="form-control"/>
    <label class="form-label">Password</label>
    <p class="alert">Invalid Credentials..!!</p>
    <button class="btn">Login </button>
  </div>
</form> …
Run Code Online (Sandbox Code Playgroud)

javascript angular

1
推荐指数
1
解决办法
1561
查看次数