Блог

Я создал облако слов, ссылающееся на эту демонстрацию. https://codesandbox.io/s/yz3t3

Теперь моя проблема в том, как сделать ссылку на каждое слово, созданное облаком слов highcharts, как на этой странице. https://ftmscan.com/topstat#Token

При переключении любого текста в word cloud на этом сайте вы будете перенаправлены на другую страницу. Как сделать такую ссылку на каждый текст — вот о чем я спрашиваю.

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

Вы можете использовать в series.point.events.click качестве обратного вызова, в который будет включена логика. Вот базовый код, с которого вы можете начать:

   point: {
    events: {
      click() {
        const point = this;

        console.log(point);

        if (point.name === "Aenean") {
          window.open("https://www.highcharts.com/");
        }
        if (point.name === "Lorem") {
          window.open("https://www.highcharts.com/");
        }
      }
    }
  }
 

Вы можете легко улучшить его для своих нужд — вы можете использовать переключатель внутри этого обратного вызова или написать функцию, которая определит, в какой точке будет открываться конкретная ссылка.

Демо: https://codesandbox.io/s/highcharts-react-demo-forked-2idvg?file=/demo.jsx:1187-1564

https://api.highcharts.com/highcharts/series.wordcloud.events.click

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

event.point, по-видимому, содержит наиболее актуальную информацию. У него есть идентификатор, имя, категория и т. Д. Вы должны иметь возможность использовать часть этой информации, чтобы найти, на какое слово было нажато.

Рабочий пример:

 const options = {
  series: [
    {
      type: "wordcloud",
      data: data,
      events: {
        click: e => {
          alert(e.point.name);
          /* Do stuff here, based on e.point.name */
        }
      }
    }
  ]
};