如何从一个组件切换一系列顶点图表但图表在另一个组件中？答案

【问题标题】：How to toggle series of an apex chart from a component but the chart is in another component?如何从一个组件切换一系列顶点图表但图表在另一个组件中？
【发布时间】：2022-11-12 01:24:54
【问题描述】：

我正在使用 Apexchart。我有 2 个组件。顶点图表在第二个组件中，我想在第一个组件中调用一个函数来切换或取消选择第二个组件中的某些图表系列。这2个组件是无关的，不是父母，孩子

顶点图表 HTML：

<div class="row">
        <div id="chart" style="display: block;float:center;margin-left: auto;margin-right: auto;" class="col-10">
          <apx-chart 
          #chart
          [series]="chartOptions.series"
          [chart]="chartOptions.chart"
          [xaxis]="chartOptions.xaxis"
          [stroke]="chartOptions.stroke"
          [tooltip]="chartOptions.tooltip"
          [dataLabels]="chartOptions.dataLabels"
        ></apx-chart>

        </div>
       
      </div>

【问题讨论】：

标签： javascript angular

【解决方案1】：

检查这个apexchart method in react

to access the documentation methods you must create an instance as follows:

// import

    import Chart from 'react-apexcharts'
    import ApexCharts from 'apexcharts'

//options relevants for chart:

const options = {
chart: {
    id: 'chartBarSeries',-> give a id
    type: 'bar',
...etc,
// in render method

            <Chart
                options={varOptions}
                series={varSeries}
                type="line"
                height={'auto'}
            />
// in a effect or button function

 

                const chart = ApexCharts.getChartByID('chartBarSeries')
                chart.hideSeries('your series name')-> or another method

【讨论】：