Тепловая карта ngx-charts настроить всплывающую подсказку с помощью tooltipTemplate

Я попытался настроить всплывающую подсказку ngx-charts-heat-map с помощью этого кода.

<ng-template #tooltipTemplate let-item="item">
  <h1>
    {{getFlag(item.name)}}
  </h1>
  <h2>{{item.name}}: {{item.value}}</h2>
</ng-template>

Я понимаю, что эта работа работает нормально, если данные представляют собой массив с одним объектом, но не с несколькими объектами.

export var single = [
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

export var multi = [
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  },

  {
    "name": "France",
    "series": [
      {
        "name": "2010",
        "value": 5000002
      },
      {
        "name": "2011",
        "value": 5800000
      }
    ]
  }
];

ngx-charts-heat-map позволяет использовать только несколько объектов, есть ли способ настроить всплывающую подсказку? а может и легенда


angular tooltip heatmap ngx-charts
person Primawan Damarjati    schedule 30.08.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Используйте шаблон следующей формы в элементе диаграммы <ngx-charts-bar-vertical-2d> (или аналогичном):

<ng-template #tooltipTemplate let-model="model">
    <!-- fields are series/name/value -->
    <div class="tt">
      {{ model.series }}
      | {{ model.name }}
      | {{ model.value }}
    </div>
</ng-template>

Пример StackBlitz основан на примере, разветвленном из текущей документации: https://stackblitz.com/edit/vertical-bar-chart-kfjrxe

person Daniel    schedule 16.02.2019