小编Gam*_*ger的帖子

系列数组更改后,React 顶点图表不会呈现

你会在这篇文章中找到答案

我是 React 新手,我使用了 apexcharts,它工作得很好,但是当我必须在同一个项目中的其他组件中使用这个图表组件时。这就是我在图表中遇到问题的地方。突然间,当系列发生变化时,我的图表开始不再更新。我花了一周的时间找出问题所在,并认为我可以在这里分享它,以便有人可以更早地找到此修复程序。

所以我发现了两件事;

  1. React-apexcharts 只是 apexcharts 的包装,每个图表都应该有一个您在选项中定义的唯一图表 id。因此,如果您想在多个地方使用组件,最好在 props 中接收图表 ID 并将其设置为:
...
this.state = {
      options:  {
        chart: {
          id: props.chartId,
...
Run Code Online (Sandbox Code Playgroud)
  1. 我们可以通过在componentDidMount()UseEffect()中使用全局 apexcharts 方法来调用方法来渲染图表或覆盖图表的系列数组,例如,
import apexchart from "apexcharts";
...
  componentDidUpdate(){
    const {chartId, seriesData} = this.props;
    //here it overrides the chart series with seriesData from props
    apexchart.exec(chartId,'updateSeries', seriesData);
  };
...
Run Code Online (Sandbox Code Playgroud)

我们可以从 apexcharts 中使用其他许多有用的方法,如文档中所述:https ://apexcharts.com/docs/methods/

我希望有人觉得它有帮助。

谢谢。

charts reactjs apexcharts

7
推荐指数
0
解决办法
4411
查看次数

React-selectscrollintoView不滚动所选值

我正在使用react-select3.2.0。当我打开选择框并选择一个选项时。然后我再次打开选择下拉列表,然后所选值就会出现。但是,当下拉列表的值来自道具而不是通过打开下拉列表手动选择时,问题就出现了。然后,当我打开下拉菜单时,它不会滚动到查看所选值。我也尝试过react-select的menuScrollIntoView={true}属性,但我的问题仍然存在。我的选择组件如下;

import Select from "react-select";
.
.
.
    <Select 
      options={props.options}
      // isLoading={props.options ? true: false}
      onMenuOpen={onOpen}
      value={props.defaultOption}
      onChange={(event: any) => props.onSelect(event)}
      className ={"MyDropdown"}
      classNamePrefix={"MyDropdown"}
      // menuShouldScrollIntoView={true}
      isDisabled={props.isDisabled}
      isSearchable={props.isSearchable}
      >
    </Select>
Run Code Online (Sandbox Code Playgroud)

typescript reactjs react-select

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

标签 统计

reactjs ×2

apexcharts ×1

charts ×1

react-select ×1

typescript ×1