Блог

В моем 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})
  

На данный момент я хочу обновить круговую диаграмму этими значениями …. как, черт возьми, мне это сделать? В основном хочу, чтобы ряд [0] имел значение callPrem, а ряд [1] — значение putPrem.

Пожалуйста, извините меня за мой нубовский жаргон с этим, я впервые работаю с reactjs, и мне это нравится, НО я медленно собираю воедино, как все это работает. Спасибо

У вас есть несколько вариантов обновления диаграммы.

Первый и рекомендуемый способ — обновить реквизиты, которые вы передаете своему компоненту

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

Обновление реквизитов автоматически приведет к повторному отображению диаграммы.

Другой способ — использовать основную ApexCharts.exec() функцию. Чтобы это сработало, вам нужно сначала установить идентификатор диаграммы в вашем pie-chart-1.js файл.

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

Как только вы установите идентификатор диаграммы, вы сможете вызвать следующий метод

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