Реагировать на параметры сюжета при событии клика

Я сделал столбчатую диаграмму highcharts в своем приложении для реагирования и теперь пытаюсь добавить событие onClick в диаграмму. Моя цель состоит в том, чтобы, когда пользователь щелкает столбец, я мог получить значения осей X и Y, а затем вызвать функцию со страницы.

Событие onClick достигается с помощью plotoptions следующим образом:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: () => {
          this.fuction.call(this, 1);
        }
      }
    }
  }
}}

Проблема в том, что я могу вызвать функцию, но не могу получить доступ к значениям столбца.

Итак, я пробую это:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function () {
          console.log(this);
        }
      }
    }
  }
}}

Таким образом, я могу получить доступ к значениям в столбце через this, но не могу вызвать функцию, так как она не содержит текущий объект страницы.

Мой вопрос в том, как я могу объединить их, чтобы я мог получить доступ к значению выбранного столбца и вызвать функцию на странице?

Я пробовал это:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function (e) {
          console.log(this);
          console.log(e);
        }
      }
    }
  }
}}

Что дает мне событие onClick и столбец, но не текущий объект страницы.

Я также пробовал это:

plotOptions={{
  column: {
    cursor: 'pointer',
    point: {
      events: {
        click: (e) => { console.log(this); console.log(e);  }
      }
    }
  }                    
}}

Но и это не дает мне того, что мне нужно.

Я уверен, что это не очень сложно, я просто не могу найти его или правильный поисковый запрос...


reactjs javascript onclick highcharts react-highcharts
person Alex    schedule 02.05.2017    source источник

Ответы (3)


arrow_upward
6
arrow_downward 

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: (e) => { console.log(this); console.log(e.point.category); console.log(e.point.y);  }
      }
    }
  }
}}

Теперь this содержит текущее состояние страницы, и я могу получить доступ к информации из столбца из e.point

person Alex    schedule 03.05.2017
comment
что я не могу использовать «это», потому что я использую функциональный компонент? - person Shinji035; 08.01.2020
comment
@ Shinji035 Я не понимаю, что ты имеешь в виду? - person Alex; 08.01.2020
comment
Я использую компонент функции реагирования, поэтому в компоненте функции нет ключевого слова this. - person Shinji035; 09.01.2020

arrow_upward
0
arrow_downward

Вы пробовали это?

click: function(e) {
    console.log(
        e.yAxis[0].value, e.xAxis[0].value
    )
}

Вы можете найти больше информации по этой ссылке:

http://api.highcharts.com/highcharts/chart.events.click

person Cpalitzyne    schedule 02.05.2017
comment
Вы должны добавить хотя бы основную информацию, которая будет находиться за ссылкой, так как после разрыва ссылки информация будет недоступна для любого пользователя. - person Fuzzzzel; 02.05.2017

arrow_upward
0
arrow_downward

Событие click в plotOption выглядит так

Демонстрация JS Bin

plotOptions: {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function () {
                    console.log('X: ' + this.x + ', Y: ' + this.y);
                    //call function passing this values as arguments
                }
            }
        }
    }
},
person Deep 3015    schedule 02.05.2017