gpt4 book ai didi

javascript - 只有一个使用 react-grid-layout 的 highcharts 可以调整大小

转载 作者:行者123 更新时间:2023-12-04 13:30:54 24 4
gpt4 key购买 nike

我正在使用 React-Grid-Layout 构建一个仪表板,该仪表板将由包含小部件(即图表、日历等)的网格组成。每个网格都可以拖动、响应和调整大小(网格中的小部件也会调整大小)。
我的代码;

import React, { Component } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import ReactHighcharts from "react-highcharts";
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "./styles/styles.css";
const ResponsiveGridLayout = WidthProvider(Responsive);

const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};

var data = [
[1220832000000, 22.56],
[1220918400000, 21.67],
[1221004800000, 21.66],
[1221091200000, 21.81],
[1221177600000, 21.28],
[1221436800000, 20.05],
[1221523200000, 19.98],
[1221609600000, 18.26],
[1221696000000, 19.16],
[1221782400000, 20.13],
[1222041600000, 18.72],
[1222128000000, 18.12],
[1222214400000, 18.39],
[1222300800000, 18.85],
[1222387200000, 18.32],
[1222646400000, 15.04],
[1222732800000, 16.24],
[1222819200000, 15.59],
[1222905600000, 14.3],
[1222992000000, 13.87],
[1223251200000, 14.02],
[1223337600000, 12.74],
[1223424000000, 12.83],
[1223510400000, 12.68],
[1223596800000, 13.8],
[1223856000000, 15.75],
[1223942400000, 14.87],
[1224028800000, 13.99],
[1224115200000, 14.56],
[1224201600000, 13.91],
[1224460800000, 14.06],
[1224547200000, 13.07],
[1224633600000, 13.84],
[1224720000000, 14.03],
[1224806400000, 13.77],
[1225065600000, 13.16],
[1225152000000, 14.27],
[1225238400000, 14.94],
[1225324800000, 15.86],
[1225411200000, 15.37],
[1225670400000, 15.28],
[1225756800000, 15.86],
[1225843200000, 14.76],
[1225929600000, 14.16],
[1226016000000, 14.03],
[1226275200000, 13.7],
[1226361600000, 13.54],
[1226448000000, 12.87],
[1226534400000, 13.78],
[1226620800000, 12.89],
[1226880000000, 12.59],
[1226966400000, 12.84],
[1227052800000, 12.33],
[1227139200000, 11.5],
[1227225600000, 11.8],
[1227484800000, 13.28],
[1227571200000, 12.97],
[1227657600000, 13.57],
[1227830400000, 13.24],
[1228089600000, 12.7],
[1228176000000, 13.21],
[1228262400000, 13.7],
[1228348800000, 13.06],
[1228435200000, 13.43],
[1228694400000, 14.25],
[1228780800000, 14.29],
[1228867200000, 14.03],
[1228953600000, 13.57],
[1229040000000, 14.04],
[1229299200000, 13.54]
];

var config = {
rangeSelector: {
selected: 1
},
title: {
text: "AAPL Stock Price"
},
series: [
{
name: "AAPL",
data: data,
tooltip: {
valueDecimals: 2
}
}
]
};

export default class App extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.conRef = React.createRef();
}
render() {
const gridItems = [
{ id: 1, name: "Item One" },
{ id: 2, name: "Item Two" }
// { id: 3, name: "Item Three" },
// { id: 4, name: "Item Four" },
// { id: 5, name: "Item Five" },
// { id: 6, name: "Item Six" },
// { id: 7, name: "Item Seven" },
// { id: 8, name: "Item Eight" },
// { id: 9, name: "Item Nine" }
];
const layout = [
{ i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 },
{ i: "2", x: 5, y: 0, w: 2, h: 1, minW: 2, minH: 1 }
// { i: "3", x: 8, y: 0, w: 3, h: 2, minW: 2, minH: 1 },
// { i: "4", x: 0, y: 3, w: 5, h: 2, minW: 2, minH: 1 },
// { i: "5", x: 5, y: 3, w: 3, h: 2, minW: 2, minH: 1 },
// { i: "6", x: 8, y: 3, w: 3, h: 2, minW: 2, minH: 1 },
// { i: "7", x: 0, y: 6, w: 5, h: 2, minW: 2, minH: 1 },
// { i: "8", x: 5, y: 6, w: 3, h: 2, minW: 2, minH: 1 },
// { i: "9", x: 8, y: 6, w: 3, h: 2, minW: 2, minH: 1 }
];

return (
<ResponsiveGridLayout
layouts={{ lg: layout }}
measureBeforeMount={true}
className="layout"
// rowHeight={this.props.rowHeight}
isDragable={true}
isResizable={true}
onDrag={this.onDragging}
onDragStop={this.onMoveCard}
margin={[20, 20]}
onResizeStop={function (event) {
this.myRef.current.chart.setSize(
this.conRef.current.clientWidth,
this.conRef.current.clientHeight
);
console.log("hello", event);
}.bind(this)}
>
{gridItems.map((item, i) => {
return (
<div key={item.id} ref={this.conRef} className="grid-item">
<HighchartsReact
ref={this.myRef}
containerProps={{ style: { width: "100%", height: "100%" } }}
options={config}
// highcharts={Highcharts}
/>
</div>
);
})}
</ResponsiveGridLayout>
);
}
}
Live demo在此处的代码沙盒上。
只有一张图表可以根据网格高度和宽度的变化调整大小。看来我只是将尺寸更改传递给一个 div 而不是其余的。我如何让所有图表都遵循网格调整大小而不是一个?

最佳答案

您的引用仅指向最后创建的图表,您需要获取与调整大小事件相关的图表,例如通过回调引用:

export default class App extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.conRef = React.createRef();

this.chartRefs = [];

this.setChartRef = (ref) => {
this.chartRefs.push(ref);
};
}

render() {
const gridItems = [...];
const layout = [...];

return (
<ResponsiveGridLayout
...
onResizeStop={function (e, layout) {
this.chartRefs[layout.i - 1].chart.reflow();
}.bind(this)}
>
{gridItems.map((item, i) => {
return (
<div key={item.id} ref={this.conRef} className="grid-item">
...
<HighchartsReact
ref={this.setChartRef}
containerProps={{ style: { width: "100%", height: "100%" } }}
options={config}
// highcharts={Highcharts}
/>
</div>
);
})}
</ResponsiveGridLayout>
);
}
}

现场演示: https://codesandbox.io/s/react-grid-layout-with-resizable-forked-1ftt5
API 引用: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

关于javascript - 只有一个使用 react-grid-layout 的 highcharts 可以调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65058336/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com