Question

我的角度项目中有一张高图的饼图。在该饼图的深入分析中，我希望以表格格式显示一些数据来代替饼图。

因此，一旦用户点击饼图片，基本上饼图应该替换为表格数据，用户也应该能够返回到饼图，通常就像我们在高图中钻取一样。

有人可以帮我转到下一步。提前谢谢。

Answer 1

您可以使用向下钻取功能进出饼图。如果向下钻取系列具有空数据，则在向下钻取之后，图表可以放置html表。

您可以加入drilldown和drillup事件来显示/隐藏/居中表格，甚至可以控制动画。

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/

在高图表的饼图中向下显示表格格式的一些数据

1 个答案: