将上下文传递给React ChartJS 2上的选项
是通过使用React的Context API来实现的。Context API是React提供的一种跨组件传递数据的机制，可以在组件树中的任何地方访问共享的数据。
在React ChartJS 2中，可以通过创建一个Context对象来传递上下文数据。首先，需要使用React的createContext函数创建一个Context对象：
import React from 'react';
const ChartContext = React.createContext();然后，在包含Chart组件的父组件中，使用ChartContext.Provider组件包裹Chart组件，并通过value属性传递上下文数据：
import React from 'react';
import { Chart } from 'react-chartjs-2';
const ChartContext = React.createContext();
const ParentComponent = () => {
const chartOptions = {
// Chart options...
};
return (
<ChartContext.Provider value={chartOptions}>
<Chart />
</ChartContext.Provider>
);
};接下来，在Chart组件中，可以使用ChartContext.Consumer组件来访问上下文数据：
import React from 'react';
import { ChartContext } from './ParentComponent';
const Chart = () => {
return (
<ChartContext.Consumer>
{chartOptions => (
<div>
{/* Use chartOptions to configure the chart */}
</div>
)}
</ChartContext.Consumer>
);
};通过这种方式，Chart组件可以获取到父组件中传递的chartOptions数据，并使用它来配置图表。
关于React ChartJS 2的更多信息和使用方法，可以参考腾讯云提供的相关文档和产品：
相关·内容
我正在使用react-chartjs-2呈现一个线形图，其中包含给定时间段内的价格数据(例如，过去一周、过去一个月、年初至今的价格等)。当显示超过60天左右的价格数据时，行开始变得混乱。因此，我希望减少出现在图表上的数据点的数量，同时仍然表示整个数据范围。 我偶然发现了插件chartjs-pluging downsample，它看起来应该可以工作：https://www.npmjs.com/package/chartjs-plugin-downsample 另外，react-chartjs-2文档描述了一种扩展图表的方法，但我还没有弄清楚插件代码 import { Chart } from
浏览 22提问于2019-05-28得票数 1
回答已采纳
1回答
我正在寻找删除标签，在广场上的以下图片：。我该怎么做？我试过用options: {plugins: {legend: display: false}}，但它似乎不起作用。我使用的包是react-chartjs-2
这是代码：
<Chart type="line" data={{
labels: props.sets[0],
datasets: props.dataset,
options: {
plugins: {
legend: {
display: false,
},
}
}
}} /
浏览 3提问于2022-02-07得票数 1
回答已采纳
1回答
我希望从Chartjs：复制这个示例的结果。
我要找的是x上的比例结果：
我使用react-chartjs-2和示例的简化版本，但我为x轴保留了相同的配置和数据：
import { DateTime } from 'luxon';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, registerables } from 'chart.js';
import 'chartjs-adapter-luxon';
ChartJS.register
浏览 4提问于2022-02-10得票数 1
回答已采纳
我使用的是Reacti-chartjs-2饼图，我想删除切片之间的线条(边框)，但是我想在图表周围显示边框。有人能告诉我怎么做吗？提前感谢！
我现在的代码是这样的：
import {Pie} from 'react-chartjs-2';
class App extends Component {
render() {
return (
<div className='pieChartPositioner'>
<Pie
heigh
浏览 0提问于2018-12-06得票数 0
回答已采纳
1回答
对React中的上下文和reducers非常陌生。我目前正在尝试使用上下文从折线图上的事件中获取日期字符串。我使用的折线图来自react-chartjs-2。 My context的设置和提供如下： export const Context = createContext();
const initialState = {
isShowCarousel: false,
date: null,
coin: null
};
const reducer = (state, action) => {
switch (action.type) {
case "G
浏览 12提问于2020-09-09得票数 2
回答已采纳
1回答
我是react的新手，我正在集成react-chartjs-2来填充图表上的数据。 我使用条形图来显示成功和失败的调用 1.)在构造函数中，我正在设置图表显示setting for chartjs所需的参数 2.)接下来，我将调用服务器并获取数据以形成X轴(日期)。date params 在YAxis上，我只想要两个刻度，0(失败)和200(成功)，但是有chartjs在调整20步大小。YAxis and XAxis is not appearing as it should only current time is appearing on the XAxis 请帮帮忙，什么都行。 谢谢
浏览 19提问于2019-02-18得票数 0
我试着用React ChartJS-2绘制散点图。基本设置只给出了图中点的x值和y值。有什么方法可以显示情节中的点的标签吗？
我四处查找，发现代码似乎工作，但它没有。
const optionsScatterPlot = {
plugins: {
tooltip: {
callbacks: {
title: function (tooltipItem:any, data:any) {
const dataLabel = dataScatterPlot.labels[tooltipItem.index];
retur
浏览 1提问于2022-04-07得票数 0
从版本6开始，使用React 16.3，react-redux添加了对上下文API的支持。 // You can pass the context as an option to connect
export default connect(
mapState,
mapDispatch,
null,
{ context: MyContext }
)(MyComponent)
// or, call connect as normal to start
const ConnectedComponent = connect(
mapState,
mapDispatch
浏览 14提问于2019-04-22得票数 0
回答已采纳
1回答
我目前正在试图添加一个渐变背景，稍微透明的雷达图内的反应组件。我只能通过在html文件中引用chartjs画布来找到这个问题的解决方案，但没有通过tsx/jsx文件中的react组件找到解决方案。
我要找的是和
下面的代码用于实现当前结果。
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, LineController, LineElement, PointElement, LinearScale, Title, Filler, RadialLinearScale } from 'ch
浏览 3提问于2022-07-10得票数 0
回答已采纳
注意:这与我的问题无关，但我已经看过了。
假设我有我的应用组件：
import React, { Component, PropTypes } from 'react';
class App extends Component {
// stuff & code
<Header />
// code & stuff
}
App.childContextTypes {
router: Proptypes.object.isRequired;
}
然后我有一个标头组件，将其定义为常量。
import React, {
浏览 1提问于2017-06-19得票数 0
回答已采纳
我有一个使用' react -chartjs-2‘库的react组件来显示一些数据。带有数据的图表运行良好。我不能做的是让图表与'chartjs- plugin -zoom‘插件一起工作。我不确定配置出了什么问题。我正在使用：
"react-chartjs-2"："^3.0.3“
"chartjs-plugin-zoom"："^1.0.1“
import { Line } from 'react-chartjs-2'
import * as zoom from 'chartjs-plugin-zoom
浏览 24提问于2021-06-10得票数 2
回答已采纳
1回答
在这种情况下，我希望滚动到另一个组件中的React组件，即，而不是直接或密切的父/子关系中的。
其结构可解释如下：
Component A > a parent > a parent > a parent > a parent > a parent > a parent > a child > a child > Component B
正如你所看到的，它根本不是直接的。如果这种关系是直接的，甚至是祖父母/孙子，我通常会通过裁判。但是在这种情况下，我需要传递大约10个文件才能访问它，这似乎很荒谬。
我知道我可以使用document.getE
浏览 3提问于2020-02-05得票数 1
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
5回答
变焦和潘的反应-图表-2
、、、
最近，我使用react chartjs-2 ()实现了图表显示。
我希望启用缩放和摇摄功能，这样它将在基于触摸屏的屏幕上更加友好。为了实现这些特性，我安装了Reactive-锤和chartjs-plugin-缩放。
import {Chart, Line} from 'react-chartjs-2';
import Hammer from 'react-hammerjs';
import zoom from 'chartjs-plugin-zoom'
我注册了插件
componentWillMount(){
Chart.plugins.
浏览 6提问于2017-09-21得票数 4
1回答
用ChartJ填充背景并作出反应
、、、、
我希望通过使用chartJS库(“Reacti-chartjs-2”)在React中创建一个线条图，它的样式为区域图。
这就是我想要达到的目标，就像背景(填充)下面的一些不透明：
代码：
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Line } f
浏览 7提问于2022-03-09得票数 1
回答已采纳
这是我的index.js
const customContext = React.createContext(context)
render(
<Provider store={store}>
<ConnectedRouter history={history} context={customContext}>
<Route render={() => <App context={customContext} />} />
</ConnectedRouter>
</Provider>
浏览 1提问于2020-05-18得票数 1
我正在尝试编写一个使用this.context中的值来派生状态对象的类组件。我有一个返回这样一个对象的方法getStyle。在constructor时，我调用this.getStyle从已经最新的状态开始，并加速初始呈现。 但是，似乎在constructor调用时，this.context是undefined，并且在render调用时它一直保持这种状态。 我是不是在代码中做错了什么？ 我不记得React的(新)上下文API文档中有任何与此问题相关的细节。this.context在componentDidMount时间是可用的，然而，这将需要一个setState，这将导致额外的组件重新呈现，这
浏览 35提问于2021-04-21得票数 0
我使用chartjs来生成条形图，其中一个要求是让x轴标签出现在图表的顶部而不是底部。(尽管我不同意这一点，但显然客户端没有回旋余地)，而且我在跟踪文档时遇到了困难，我发现的任何示例都是针对旧版本的。
我使用的相关包是：
"chart.js": "^3.7.1",
"react-chartjs-2": "^4.0.0",
其次，他们想要标签包装，而不是基于条形宽度的单行，因为它是响应的。我正在尝试使用数组作为示例来拆分这些单词，但想知道这是否可以在chartjs中完成。下面是我到目前为止设置的代码(我不得不使用一些敏感数据的lor
浏览 4提问于2022-02-16得票数 1
我试图使用chartjs构建一个LineChart，但是我正在运行一些错误，我无法告诉它的来源，数据是按需要从服务器传输的，并且(根据日期和coinValue)分裂得很好。知道有什么问题吗？
以下是错误：
这是我的密码：
import { Link } from "react-router-dom";
import { Line } from "react-chartjs-2";
import {Chart as chartjs, Title, Tooltip, LineElement, Legend, CategoryScale, LinearSca
浏览 3提问于2022-07-22得票数 0
我使用react-bootstrap的ModalTrigger来显示一个字段很重的模式(基于react的模式)，这意味着向它发送一堆道具：
<ModalTrigger modal={<MyModal field1={value1} field2={value2} (more fields...)/>}>
Click here to open
</ModalTrigger>
创建触发器的父组件具有通过道具传入的字段/值，该组件的父组件也将其作为道具传递给实际保存数据的顶级组件。这两者基本上都是管道，这是一个经典的childContext场景，只是它不能
浏览 1提问于2015-05-21得票数 8
回答已采纳
我试图在react中从远程api中获取数据，为此，我决定使用上下文api，但我不能使用上下文api。实际上我觉得我做得对。当浏览器打开时，出现一个空白屏幕，不应该是这样的。React也不会显示任何错误，但是当我在浏览器中打开控制台时，会出现以下错误。有什么问题吗？你以前遇到过这样的问题吗？
我在控制台中的错误
Uncaught Error: [ProductContextProvider] is not a <Route> component. All component children of <Routes> must be a <Route> or &
浏览 7提问于2022-08-03得票数 0
回答已采纳
我使用的是react chartjs-2v4.1.0和chart.js v3.9.1
我在这里有个问题
如何强制图表从y轴上的0开始？
(这里有一些补充信息)
我的线图选项：
浏览 2提问于2022-09-24得票数 0
回答已采纳
我使用chartjs和react-chartjs-2安装了yarn add react-chartjs-2 chart.js。但是，当我从react-chartjs-2库导入任何组件时，会引发此错误：
The path "react-chartjs-2" is imported in [path]\chart.tsx but "react-chartjs-2" was not found in your node_modules. Did you forget to install it?
有谁知道这里有什么问题吗？
我尝试了这个，将它添加到package.js
浏览 13提问于2022-11-25得票数 2
回答已采纳
遵循react-chartjs-2文档并在codesandbox上设置饼图可以让一切正常工作，只是选项不起作用。
浏览 59提问于2021-05-10得票数 0
回答已采纳
我当前的项目需要安装react-native-chartjs和react-native-canvas。react-native-chartjs使用react-native-webview@2.0.0，而react-native-canvas需要不同版本的react-native-webview - react-native-webview@10.0.0，它返回以下错误： ? 现在我应该do...both什么是我的项目的必需依赖项
浏览 26提问于2020-11-03得票数 0
App.js
const[getScreen, showScreen] = useState(false);
const[getEmail, setEmail] = useState("");
<LoginScreen/>
<LoginContexts.Provider value={{getEmail,setEmail,getScreen,showScreen}}>
{showScreen?<Screen2/>:<LoginScreen/> }
</LoginContexts.Provider>
登录屏幕
浏览 15提问于2022-01-25得票数 0
我在react- chartjs -2中更新图表的选项时遇到了问题，恰好是在chartjs的dragData插件中。 我已经为图形激活了dragData，这部分工作，图形允许您拖动数据。当我点击按钮禁用拖动选项时，问题就出现了，图形不工作，它仍然允许拖动值。 显然，在控制台中，图形的选项会发生变化，但它不会反映在图形的交互中，我将代码留在下面的链接中。 useEffect(() => {
if(props.state === true){
let ref = chartReference.current.chartInstance;
ref.options.dr
浏览 23提问于2020-03-30得票数 0
回答已采纳
我对ReactJS和Material UI非常陌生。我尝试在一个方法中使用我的LeftList ES6类的上下文，该方法由孩子的onItemTap事件调用。
class LeftList extends React.Component {
constructor(props, context) {
super(props, context);
console.log('constructor:');
console.log(context);
this.state = { menuItems: [] };
}
render() {
浏览 2提问于2015-09-18得票数 0
1回答
这里是我的上下文文件：
import React from 'react';
import { createContext, useState } from 'react';
export const TabContext = createContext({
opened: false,
toggleOpened: () => {},
});
export const TabContextProvider = ({ children }) => {
const [opened, setOpened] = useState(
浏览 5提问于2022-10-25得票数 2
回答已采纳
1回答
所有人。试图使用一个必需的属性(我不关心上下文中的其他属性)通过道具来生成一个react组件。到目前为止，结果是：
interface IContextWithData {
data: Record<any,any>;
}
interface IProps<T extends IContextWithData> {
context: React.Context<T>;
}
const Component: React.FC<IProps<any>> = (props: IProps<any>): JSX
浏览 2提问于2022-09-05得票数 0
我正在尝试使用react-chartjs-2创建折线图。我从一个应用程序接口中获取数据，并在componentWillMount阶段将其呈现给每个图表。我知道我得到了正确的数据，因为我最初使用Sparkline组件创建了图表，并且图表非常完美。我决定使用Chartjs，因为它具有自定义图表的能力。问题是每个图表上只显示前两个数据点。有人能告诉我我哪里做错了吗？我是否忘记了图表选项中的某些内容？我是一个相对较新的反应，所以我只是对使用外部组件的感觉。谢谢!
import {Bar, Line, Pie} from 'react-chartjs-2';
export defa
浏览 3提问于2018-09-16得票数 0
我通过npm install --save react-chartjs-2 chart.js成功地安装了react-chartjs-2和chart.js，但是当我尝试使用LinkGraph时，我得到了错误： Failed to compile.
./src/LineGraph.js
Module not found: Recursion in resolving 请帮帮忙。
浏览 13提问于2020-12-22得票数 2
1回答
我尝试使用chartjs和react-chartjs-2，但显示以下错误：
编译失败。
./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js/auto' in 'C:\Users\An\chart-react\project-folder\client\node_modules\react-chartjs-2\dist'
我的代码：
import React from "react";
import { B
浏览 1提问于2021-05-25得票数 0
我正在制作购物卡项目，我决定使用Contextapi和useReducer作为我的状态管理，在我的项目开始时，我在上下文中包装了应用程序，它使我的应用程序崩溃，这是代码。
主要指数*
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import Context from "./Context";
Re
浏览 0提问于2022-03-18得票数 0
1回答
import React from "react";
import { Line } from "react-chartjs-2";
// "chart.js": "^2.9.4",
// "react-chartjs-2": "^2.11.1"
const ext_data = [11, 19, 3, 5, 2, 3, 14, 19];
const ll = Array.from(Array(ext_data.length).keys());
const data = {
labels:
浏览 4提问于2022-12-01得票数 0
回答已采纳
我试图抽象useContext和useReducer的逻辑，使其在创建新上下文时不会重复代码，但当我尝试使用typescript强类型createContext时，我遇到了一些问题。 使用这个函数，我会自动创建上下文： import React, { createContext, ReactElement, useReducer } from 'react';
type ProviderProps = {
children: ReactElement;
};
type ActionType = {
type: string;
payload?: any
浏览 73提问于2021-01-06得票数 1
回答已采纳
1回答
我有React组件，称为网站来处理状态。
class Websites extends React.Component {
constructor(props) {
super(props);
this.handleWebsiteDelete = this.handleWebsiteDelete.bind(this);
this.state = {
websites: this.props.websites
}
}
handleWebsiteDelete(id) {
console.log("delete")
浏览 2提问于2016-09-18得票数 0
回答已采纳
我必须使用react-chartjs-2创建堆叠条形图。
options : {
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true
}]
}
}
堆叠在酒吧似乎不起作用。
我使用chartjs
浏览 2提问于2017-05-26得票数 8
回答已采纳
2回答
react覆盖画布的样式
、、、、
这是当前的UI
我要删除数字(1-10)的background-color，即#fff。
是否可以这样做呢？
App.tsx
import React from "react";
import {
Chart as ChartJS,
RadialLinearScale,
ArcElement,
Tooltip,
Legend
} from "chart.js";
import { PolarArea } from "react-chartjs-2";
ChartJS.register(RadialLinearScale,
浏览 5提问于2022-07-12得票数 0
回答已采纳
1回答
我在做一个有反应的网络项目。
如何从库中只导入3个组件。
我用过：
import Line, Bar, Doughnut from 'react-chartjs-2';
给出一个错误。
import Line from 'react-chartjs-2';
import Bar from 'react-chartjs-2';
import Doughnut from 'react-chartjs-2';
使所有的线条，酒吧和甜甜圈元素充当甜甜圈的元素。
使用
import {Line, Bar, Doughnut} from &#
浏览 1提问于2016-11-28得票数 1
回答已采纳
1回答
我试图用反作图制作一个水平图表，我希望每个数据都能显示百分比。
import React, { Component } from "react";
import { HorizontalBar } from "react-chartjs-2";
export default class Button extends Component {
render() {
const dataHorBar = {
labels: ["January", "February", "March",
浏览 10提问于2022-03-09得票数 1
1回答
我正在尝试通过“react chartjs-2”构建条形图组件。我在这里粘贴了我的代码：。这就是它的样子：
import React from 'react';
import {Bar} from "react-chartjs-2";
const BarChart = () => {
const barChartData = {
labels: ["October", "November", "December"],
datasets: [
{
浏览 3提问于2022-03-04得票数 1
1回答
我想在组件中使用ChartJS，并注意到它也有一个CDN以及react-chartjs-2。
Uncaught ReferenceError: process is not defined
at react-chartjs-2.js:80
at react-chartjs-2.js:4
at react-chartjs-2.js:5
第80行是：
if (process.env.NODE_ENV !== 'production') {
validateFormat = function validateFormat(format) {
if
浏览 0提问于2020-04-09得票数 0
我有一个名为"Home“的组件，它是我的网站的主页。此主页组件使用名为"ProductContext“的上下文来访问data.js文件中的所有产品。问题是，我的网站的每个页面都有多个*data.js文件，所以我告诉上下文文件“我在哪个页面上”，这样它就可以访问相应的*data.js文件。
"Home“组件：
class Home extends Component {
state = {
page: "Home",
};
componentDidMount() {}
render() {
return (
浏览 0提问于2020-05-27得票数 0
使用react，在函数组件返回的JSX代码中，我可以拥有：
MyComponent.jsx
<MySubComponent props1={{a: 0, b:1}}/>
OR
<MySubComponent props2={["toto", "tata"]}/>
其中，我的子组件是通过回忆录导出的：
MySubComponent.jsx
export default React.memo(MySubComponent)
但是，这会破坏回忆化，因为格式为{.}或{.}的道具每次都会实例化一个新的对象/数组(值相同，但内存地址不同)，因此道具
浏览 2提问于2021-11-30得票数 1
我在我的一个项目中使用react-chartjs-2，我找不到图表的问题，因为在手机上所有的标签和图例仍然是大的af。我试过responsive: true，maintainAspectRation: true。毫无办法
浏览 0提问于2018-12-03得票数 3
1回答
我已经安装了npm包引导程序+将其导入到gatsby-browser.js文件中(见下文)。引导CSS可以工作，但问题是我一直在控制台中获取此错误消息。我做错了什么？
可能出现的问题：
我需要安装react引导吗？
另一个盖茨比插件？
我是不是错过了额外的盖茨比设置？
错误：
[Error] Not allowed to load local resource: blob://nullhttp//localhost:8000/bootstrap.min.css.map
[Error] Not allowed to request resource
[Error] Canno
浏览 21提问于2020-07-14得票数 1
当我尝试使用react chartjs-2时，我得到了以下错误：
找不到./node_modules/react-chartjs-2/dist/index.modern.js模块:无法解析'C:\Users\win10\Desktop\project\covid-19-tracker\node_modules\react-chartjs-2\dist‘中的“chart.js/ ”
正如在package.json中所看到的，我正在使用的包的版本如下：
"chart.js": "^2.9.4",
"react-chartjs-2":
浏览 2提问于2021-07-12得票数 1
我正在使用react-chartjs-2。我想在图表下面显示标签的位置。另外，标签的形状目前是方形的，但我想将其更改为圆形。我指定了option和position: bottom，但是标签的位置没有改变。 import "./styles.css";
import React from "react";
import { Bar } from "react-chartjs-2";
const data = [
{
label: "a",
data: [56, 23, 55, 56, 57]
},
{
浏览 10提问于2021-11-18得票数 0
我正试着用react chart.js-2制作一个条形图。我刚刚注意到，所有条形图示例都是从数据的最小数量开始的，而不是0。
下面的例子是，条形图从40开始，而不是0。我想要做的是从0开始制作一个条形图，而不是数据的最小数量。
是否可以使用react chart.js 2使其生效？
下面是代码(主要是官方示例中的代码)
import React from 'react';
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';
const da
浏览 3提问于2017-09-28得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
