Показать некоторые данные в табличном формате в развернутой круговой диаграмме

Question

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

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

Может кто-нибудь помочь мне перейти к следующему шагу.Заранее спасибо.

Answer 1

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

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

const tables = {
  'chrome': document.getElementById('chrome'),
  'firefox': document.getElementById('firefox')
}

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      drilldown(e) {
        const table = tables[e.point.drilldown]

        table.style.display = 'block'

        const tableRect = table.getBoundingClientRect()
        const containerRect = this.container.getBoundingClientRect()

        table.style.left = (containerRect.left + (containerRect.width - tableRect.width) / 2) + 'px'
        table.style.top = (containerRect.top + (containerRect.height - tableRect.height) / 2) + 'px'
      },
      drillup(e) {
        Object.values(tables).forEach(table => table.style.display = 'none')
      }
    }
  },

  "series": [{
    "name": "Browsers",
    "colorByPoint": true,
    "data": [{
        "name": "Chrome",
        "y": 62.74,
        "drilldown": "chrome"
      },
      {
        "name": "Firefox",
        "y": 10.57,
        "drilldown": "firefox"
      }
    ]
  }],
  "drilldown": {
    "series": [{
        "name": "Chrome",
        "id": "chrome",
        "data": []
      },
      {
        "name": "Firefox",
        "id": "firefox",
        "data": []
      }
    ]
  }
});

живой пример: https://jsfiddle.net/q2fm0v49/