Pada dasarnya saya menjalankan aplikasi Reactjs dengan Highcharts menggunakan pembungkus highcharts-react-official. Saya mendefinisikan bagan tinggi Component dan sasarannya adalah membuat halaman laporan dengan selusin bagan dengan setelan dan sumber data yang berbeda. Saya juga ingin menambahkan highstock komponen alat stok ke dalamnya. Masalah yang saya temukan adalah ketika saya mengklik tombol Indicators di sebuah komponen (opsi pertama, kiri atas) popop dipicu di semua komponen.

Komponen Bagan

// (...) Imports

class CustomGUIChart extends Component {
  constructor(props) {
    super(props);
    const { data } = this.props;

    this.state = {
      options: {
        legend: {
          enabled: true
        },

        tooltip: {
          enabled: false
        },

        series: data.map((set, index) => ({
          ...set,
          id: `series-${index}`,
          type: "line",
          cursor: "pointer",
          marker: {
            enabled: false
          }
        })),

        stockTools: {
          gui: {
            enabled: true
          }
        }
      }
    };
  }

  render() {
    const { options } = this.state;

    return (
      <Card>
        <CardContent style={{ padding: 0 }}>
          <HighchartsReact
            highcharts={Highcharts}
            constructorType="stockChart"
            containerProps={{ className: "chart" }}
            options={options}
            allowChartUpdate
          />
        </CardContent>
      </Card>
    );
  }
}

CustomGUIChart.propTypes = {
  data: PropTypes.array.isRequired
};

export default CustomGUIChart;

Komponen bagan panggilan Konten Halaman beberapa kali

// (...) Imports

const chartData = mockData.map((series) => ({
  ...series,
  data: series.data.map((point) => {
    const dateArr = point[0].split('-');
    return [
      Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
      point[1] * 100
    ];
  })
}));

function SectionContent() {

  return (
    <>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>

    </>
  );
}

export default Content;

Bagaimana cara menangani pemicu peristiwa tak terduga ini di berbagai komponen/bagan?

Berikut adalah Demo yang berfungsi:

0
Bernardo Marques 23 Maret 2020, 19:55

1 menjawab

Jawaban Terbaik

Anda perlu mendeklarasikan bindingsClassName unik untuk setiap bagan.

navigation: {
  bindingsClassName: 'chart2'
}

Demo langsung: https://jsfiddle.net/BlackLabel/y5wxvukr/1 /

Utas terkait: https://github.com/highcharts/highcharts/ masalah/10599

Referensi AP: https://api.highcharts.com/highstock/ navigasi.bindingsClassName

1
ppotaczek 24 Maret 2020, 12:20