0

当我更改图表的宽度时，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初始加载相比，它也会缩小（条形）。

第一张照片 - 原创。

在此处输入图像描述

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

在此处输入图像描述

4

2 回答 2

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 组件上更改widthprop 是行不通的。

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

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

我不知道为什么我需要这样做只是为了让图表宽度正常运行。请注意，不仅仅是为了更新，而是为了不拥有自己的想法。如果有人知道，任何见解都会很棒！

于 2019-07-18T04:57:15.303 回答
0

如果您正在使用react-apexcharts，您是否尝试过将宽度直接设置到组件的道具中？

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

下一次，当你更新 width 属性时，它会自动重绘到新的宽度。

如果上述方法不起作用，请发布一个有效的代码框演示，以便在我们这边轻松重现。

于 2019-07-17T10:36:58.447 回答