показать всплывающую подсказку для каждой точки старшего сетевого графика в Angular - PullRequest
Новая
       25

показать всплывающую подсказку для каждой точки старшего сетевого графика в Angular

0 голосов
/ 06 мая 2019

Я строю сетевые графики с использованием высоких и угловых диаграмм в моем приложении Angular.Я могу успешно отобразить график с метками данных.Теперь я должен показать некоторые данные всплывающей подсказки, когда наведу курсор на каждую точку / узел графика.Как мне это сделать?Как я могу показать всплывающую подсказку, соответствующую каждой точке графика?

На данный момент я использую следующие параметры, чтобы нарисовать график и показать подсказку.Эта подсказка, показывает ту же информацию, когда я наводю курсор мыши на любую точку.Мне нужно показать разные данные для каждой точки.Как я могу это сделать? 

chartOptions = {
"chart": {
    "type": "networkgraph",
    "height": "100%"      
},
"title": {
    "text": "Network graph demo"
},
"subtitle": {
    "text": "A Force-Directed Network Graph in Highcharts"
},
"plotOptions": {
    "networkgraph": {
    "keys": ["from", "to"],
    "layoutAlgorithm": {
        "enableSimulation":true
    }
    }

},
"series": [
    {
    "dataLabels": {
        "enabled": true,            
        "linkFormat": ""          
    },
    "data": [{"from" : "a", "to": "b"},
            {"from": "a", "to": "c"},
            {"from": "a", "to": "d"} ],
    "marker" : {"radius" : 18}
    }

],
"tooltip" :
{
    "enabled" : true, 
    "formatter" : function() {
    return "<div> <span> My tooltip information </span> </div>"
    }
}
}

1 Ответ

3 голосов
/ 06 мая 2019

Я использую console.log() для изучения объектов, доступных мне в API Highcharts

Вы увидите в консоли вывод всей доступной информации, в пределах которой name кажется тем, чем вы являетесьпосле?

Попробуйте это: 

"tooltip" :
{
    "enabled" : true, 
    "formatter" : function() {
        console.log(this.point)
      return this.point.name
    }
}

Обновление ниже, это близко к тому, что вы ищете? 

"tooltip" :
{
    "enabled" : true, 
    "useHTML" : true, 
    "formatter" : function() {
      let linkFrom_li = '';
      let linkTo_li   = '';
      let tooltipHTML   = '';
      for (let i = 0; i < this.point.linksTo.length; i++) {
          linkFrom_li = linkFrom_li + `<li>${this.point.linksTo[i].from}</li>`;
      }
      for (let i = 0; i < this.point.linksFrom.length; i++) {
          linkTo_li   = linkTo_li + `<li>${this.point.linksFrom[i].to}</li>`;
      }
      tooltipHTML = tooltipHTML + `<b>Links from [${this.point.name}]</b>:<ul>${linkFrom_li}</ul>`;
      tooltipHTML = tooltipHTML + `<b>Links to [${this.point.name}]</b>:<ul>${linkTo_li}</ul>`;
      return tooltipHTML;
    }
}
...