Биржевые инструменты, взаимодействующие с другим графиком / компонентом - PullRequest
Новая
       19

Биржевые инструменты, взаимодействующие с другим графиком / компонентом

0 голосов
/ 23 марта 2020

Обычно я запускаю приложение Reactjs с Highcharts, используя оболочку highcharts-react-official. Я определяю старшую диаграмму Component, и цель состоит в том, чтобы создать страницу отчета с дюжиной диаграмм с различными настройками и источниками данных. Я также хочу добавить highstock комплектующие инструментов инструментов к нему. Проблема, которую я обнаружил, заключается в том, что при нажатии кнопки Indicators в компоненте (первая опция, вверху слева) всплывающее окно запускается во всех компонентах.

Компонент диаграммы 

// (...) 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;

Содержимое страницы вызывает компонент диаграммы несколько раз 

// (...) 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;

Как обработать этот неожиданный триггер события в разных компонентах / диаграммах?

Здесь является работающей демонстрацией:

1 Ответ

1 голос
/ 24 марта 2020

Вам нужно объявить уникальный bindingsClassName для каждого графика. 

navigation: {
  bindingsClassName: 'chart2'
}

Демо: https://jsfiddle.net/BlackLabel/y5wxvukr/1/

Похожие темы: https://github.com/highcharts/highcharts/issues/10599

AP Ссылка: https://api.highcharts.com/highstock/navigation.bindingsClassName

...