Question

在我的index.js中，我定义了饼图：

import pieChart1 from './chart/pie-chart-1';

然后将其添加到render（）函数下：

        <Col md={6}>
                <Card>
                    <Card.Header>
                        <Card.Title as="h5">BALANCE</Card.Title>
                    </Card.Header>
                    <Card.Body>
                        <Chart {...pieChart1} />
                    </Card.Body>
                </Card>
            </Col>

我在./chart/pie-chart-1.js中定义了一个饼图，如下所示：

export default {
    height: 320,
    type: 'pie',
    options: {
        labels: ['Call', 'Put'],
        colors: ['#4680ff', '#0e9e4a'],
        legend: {
            show: true,
            position: 'bottom',
        },
        dataLabels: {
            enabled: true,
            dropShadow: {
                enabled: false,
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    },
    series: [50, 50]

我有一个调用API，进行一些数学运算并将值保存为状态的函数。

  this.setState({CallPrem : callPrem, PutPrem : putPrem})

在这一点上，我想用这些值更新饼图....我该怎么做？基本上希望series [0]具有callPrem值，而series [1]具有putPrem。

请原谅我像菜鸟一样的术语，这是我第一次使用reactjs，但是我喜欢它，但是我正在慢慢地拼凑这一切的工作原理。谢谢

Answer 1

您有多种选择来更新图表。

第一种也是推荐的方法是更新传递给组件的道具

const newOptions = {
  ...pieOptions,
  options: {
    ...options,
    labels: [newLabels]
  },
  series: [newSeries]
}

更新道具会自动重新绘制图表。

另一种方法是使用核心ApexCharts.exec()函数。为此，您需要首先在pie-chart-1.js文件中设置一个图表ID。

export default {
    height: 320,
    type: 'pie',
    options: {
      chart: {
        id: "chart-id"
      }
    }
}

设置图表ID后，您将可以调用以下方法

ApexCharts.exec('chart-id', 'updateOptions', {
  series: newSeries,
  labels: newLabels
})

如何更新饼图中的系列

1 个答案: