Question

当我使用updateOptions更改图表的宽度时，即使具有相同的宽度值，它的宽度也不同于初始加载。

我正在使用以下非常基本的初始选项来绘制图表：

options: {
  id: "chart_id",
  chart: {
    width: "100%"
  }
}

我正在使用react-apexcharts作为

渲染图表

<ReactApexChart options={options} series={series} type="bar" />

然后更改宽度我正在呼叫

ApexCharts.exec('chart_id', 'updateOptions', newOptions);

其中newOptions与原始选项相同，但宽度不同。

但是即使我用相同的宽度更新选项，与初始负载相比，它也会缩小plot-series（条形图）。

第一张照片-原始

第二张照片-弄乱了（在照片中，图表的宽度是完整的屏幕截图，但是以编程方式设置图表的宽度时，图系列会缩小，如图所示

Answer 1

如果您使用的是o，您是否尝试过将宽度直接设置为组件的道具？

react-apexcharts

下次，当您更新宽度道具时，它将自动重绘为新的宽度。

如果上述方法不起作用，请发布有效的codeandbox演示，以便轻松地在我们这边进行复制。

Answer 2

我终于把它修好了，男孩，这是一个奇怪的修好。

我能够解决此问题的一种方法是不使用react-apexcharts，而是像这样切换到常规apexcharts

import ApexCharts from 'apexcharts';

componentDidMount() {
    new ApexCharts(document.getElementById('chart'), options);
    chart.render();
  }

render() {
  return <div id="chart" />
}

当我这样做时，ApexCharts.exec('chart_id', 'updateOptions', newOptions);调用可以正确更改宽度

但是我真的很想使用react-apexcharts，因此通过反复试验，我发现为了正确更改宽度，我必须做两件事：

首先-我需要使用ApexCharts.exec('chart_id', 'updateOptions', newOptions);方法更改宽度，以便重新加载图表。只需直接在React上更改width道具组件将无法正常工作。

第二个-这是很奇怪的部分，即使传递给创建者的DOM挂钩为空，我也需要初始化一个new ApexCharts对象。例如，在文档顶部，我的4个顶点图相关行是：

import ReactApexChart from "react-apexcharts";
import options from './chart-data.js';
import ApexCharts from 'apexcharts'
new ApexCharts(null, options);

我不知道为什么我需要这样做只是为了使图表宽度正常运行。提醒您，不仅要更新，而且不要自己管它。如果有人知道，任何见识都将是很棒的！

以编程方式更改图表宽度-ApexCharts

2 个答案: