- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
嘿,我在尝试实现时遇到了很多麻烦 this example进入我的 React 项目。该示例与我的设置方式不同,我无法将其从他们的方式转换为我的方式。我有一个图表,但我真的希望包含渐变颜色。
这就是我所得到的......
import React from 'react'
import { Chart } from 'react-charts'
class GraphClub extends React.Component {
constructor(props) {
super(props)
this.state = {
chartData: [
{
label: 'Won',
data: [
[0, 0],
],
},
],
}
}
componentDidMount() {
//Get chartData
}
render() {
return (
<>
<Chart
data={this.state.chartData}
axes={[
{
primary: true,
type: 'linear',
position: 'bottom',
show: this.props.axis,
},
{
type: 'linear',
position: 'left',
show: this.props.axis,
},
]}
series={{ type: 'line', showPoints: false }}
tooltip
/>
</>
)
}
}
export default GraphClub
该图表有效,但是当我尝试添加颜色时,我无法走得很远而不会出错。希望得到一些帮助。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
这是显而易见的,因为它是一个类组件,而不是这一行的函数
const [{ activeSeriesIndex, activeDatumIndex }, setState] = React.useState({
最佳答案
前言
一些注意事项:
useLagRadar()
和
useDemoConfig()
事实证明,示例中使用的转换为类组件太费力了,所以我只是将它们添加到高阶组件中。为此,我将 MyChart 类重命名为 MyChartInner 并创建了一个名为 MyChart 的新功能组件 HOC,它使用了上述 Hook 。
import React from "react";
import ReactDOM from "react-dom";
import { Chart } from "react-charts";
import useDemoConfig from "./useDemoConfig";
import useLagRadar from "./useLagRadar";
import ResizableBox from "./ResizableBox";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
activeSeriesIndex: -1,
activeDatumIndex: -1,
};
}
render() {
const {
activeSeriesIndex,
activeDatumIndex,
} = this.state;
const setState = newState => this.setState(newState);
return (
<div>
{JSON.stringify({ activeSeriesIndex, activeDatumIndex }, null, 2)}
<MyChart
elementType="line"
setState={setState}
activeDatumIndex={activeDatumIndex}
activeSeriesIndex={activeSeriesIndex}
/>
<MyChart
elementType="area"
setState={setState}
activeDatumIndex={activeDatumIndex}
activeSeriesIndex={activeSeriesIndex}
/>
<MyChart
elementType="bar"
setState={setState}
activeDatumIndex={activeDatumIndex}
activeSeriesIndex={activeSeriesIndex}
/>
</div>
);
}
}
const MyChart = props => {
useLagRadar();
// const { data, grouping, randomizeData } = useDemoConfig({
const demoConfig = useDemoConfig({
series: 4,
height: 200,
grouping: "primary",
dataType: "ordinal",
show: ["elementType", "grouping"]
});
return (
<MyChartInner
{...demoConfig}
{...props}
/>
);
}
class MyChartInner extends React.Component {
constructor(props) {
super(props);
}
render() {
const {
elementType,
activeDatumIndex,
activeSeriesIndex,
setState
} = this.props;
//useLagRadar();
const { data, grouping, randomizeData } = this.props;
const series = {
type: elementType
};
const axes = [
{
primary: true,
type: "ordinal",
position: "bottom"
},
{
type: "linear",
position: "left",
stacked: true
}
];
const getSeriesStyle =
series => ({
color: `url(#${series.index % 4})`,
opacity:
activeSeriesIndex > -1
? series.index === activeSeriesIndex
? 1
: 0.3
: 1
});
const getDatumStyle =
datum => ({
r:
activeDatumIndex === datum.index &&
activeSeriesIndex === datum.seriesIndex
? 7
: activeDatumIndex === datum.index
? 5
: datum.series.index === activeSeriesIndex
? 3
: datum.otherHovered
? 2
: 2
});
const onFocus =
focused =>
setState({
activeSeriesIndex: focused ? focused.series.id : -1,
activeDatumIndex: focused ? focused.index : -1
});
return (
<>
<button onClick={randomizeData}>Randomize Data</button>
<br />
<br />
<ResizableBox>
<Chart
data={data}
grouping={grouping}
series={series}
axes={axes}
getSeriesStyle={getSeriesStyle}
getDatumStyle={getDatumStyle}
onFocus={onFocus}
tooltip
renderSVG={() => (
<defs>
<linearGradient id="0" x1="0" x2="0" y1="1" y2="0">
<stop offset="0%" stopColor="#17EAD9" />
<stop offset="100%" stopColor="#6078EA" />
</linearGradient>
<linearGradient id="1" x1="0" x2="0" y1="1" y2="0">
<stop offset="0%" stopColor="#FCE38A" />
<stop offset="100%" stopColor="#F38181" />
</linearGradient>
<linearGradient id="2" x1="0" x2="0" y1="1" y2="0">
<stop offset="0%" stopColor="#42E695" />
<stop offset="100%" stopColor="#3BB2B8" />
</linearGradient>
<linearGradient id="3" x1="0" x2="0" y1="1" y2="0">
<stop offset="0%" stopColor="#F4Ea0A" />
<stop offset="100%" stopColor="#df4081" />
</linearGradient>
</defs>
)}
/>
</ResizableBox>
</>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
运行:
# Clone the repo and checkout the branch
git clone --branch stackoverflow-q68091135 https://github.com/codebling/react-charts.git
# Switch to the "custom-styles" example directory
cd react-charts/examples/custom-styles/
# Install the dependencies
npm i
# Run the demo
npm start
关于reactjs - 将 react-charts 功能组件示例转换为类组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68091135/
我有一个通过 Google Charts Org Chart API 呈现的图表。当用户单击节点时,如何获取有关所选节点的数据。我理解到我进行“getSelection”调用以将选择信息输出到 Jav
我使用Chart.js显示雷达图。我的问题是某些标签很长: 图表无法显示或显得很小。 那么,有没有办法换行或为标签分配最大宽度? 感谢您的帮助! 最佳答案 对于Chart.js 2.0+,您可以使用数
我想问一下使用Chart.js http://www.chartjs.org/ 可以吗?获得组合条形图和折线图? 感谢您的任何建议。 最佳答案 下面的答案与chart.js 1.x有关。 Chart.
我在addData和removeData函数中添加了chart.resize(),但它总是增加高度并且永远不会减少! 当用户单击菜单项时,我正在更新图表。有些项目有超过 100 个数据,有些项目只有
horizontal bar chart var barOptions_stacked1 = { tooltips: { e
我们将 Chart.js 与 clojurescript 和 Reagent 一起使用。现在我知道 Chart.js 有一个 Chart.update() 方法来用新数据更新图表。所以问题是,如何设置
我想显示一个包含多个数据集的条形图,如下所示,。。我可以获取如下所示的数据。。而是如何转换这个JSON数组,如下所示。我需要显示过去7天每个班次的出勤百分比。。感谢你在这方面的帮助。谢谢!。=编辑=
I want to display a bar chart with multiple datasets as shown below,我想显示一个包含多个数据集的条形图,如下所示, I'
假设我有一个 Charting.Chart : 我想导出到 Excel.Workbook.Worksheet以便我稍后可以“播放”数据(例如在 Excel 图表上拖放更多数据等): 请不要介意第二张图
离子性: ionic(Ionic CLI):4.10.3(/Users/faiz/.nvm/versions/node/v8.9.4/lib/node_modules/ionic) 离子框架:离子角3
我正在使用Chart.js来可视化我的数据,如下图所示。。。我想在图表中间加一张照片。。。如何在甜甜圈图表的中间添加照片?下面是我的javascript代码:
我正在使用 Kendo 饼图,我想将其配置为在没有数据可显示时显示一条消息。我正在使用以下 js 函数配置饼图 - 变量“JsPieChartDataSet”是一组 JSON 格式的数据。 是否有可以
是否可以在图表和x轴之间获得更多空间? 是否可以在图表的右侧和 Canvas 区域的末端之间留出更多的空间?我想在图表旁边的 Canvas 中添加更多元素,但是这是不可能的,因为图表占用了整个 Can
我正在使用chart.js,在图表的某些点的多日条目之间缺少一些数据。我已将这些值分配为null,但希望图表在缺失点之间绘制一条连接线。这是我所拥有的: 有没有办法将chart.js中的点连接起来?也
我正在生成一些谷歌图表,但我被困在这里。 Google 允许您将列堆叠起来。但它要么受到限制,要么我无法将其配置为工作。取自谷歌,这里有一个例子,显示了两个国家每年生产的咖啡杯数: 假设我有另一个相同
使用 Google Charts 条形图,是否可以更改一个条形的颜色。例如,我想将 2006 年的数据设为红色(其他条形为蓝色)。 function drawVisualization() {
我目前正在尝试重新设计设计布局。我通过尝试和错误得到了大部分。我唯一不明白的部分是: 1.) 左侧和底部的黑色轴。所以只有那些是黑色的2.) 里面的浅灰色轴。如何在颜色上应用不透明度或使用我自己的颜色
我使用以下命令创建了一个名为“abc”的 Helm 图表helm create abc现在,当我安装此图表时,所有创建的kuberenets资源将具有一个包含“abc”的名称。 现在,我必须将图表“a
我正在构建一个折线图,除了 ChartScrollbar 中的标签之外,一切正常,因为类别名称有点长,cahrtScrollbar 中的标签相互堆叠使其无法读取。我想知道是否可以隐藏标签、仅显示一些标
我正在使用 Chart.js 2.5。我的情况是,我有一个包含 40 个数据的数据集,但我只想在折线图中显示 7 个数据,但仍然可以水平向左/向右移动以发现其余数据。 我尝试了ticks.maxTic
我是一名优秀的程序员,十分优秀!