Highcharts大树图中的面包屑

Question

我需要在高级图表大树图中显示面包屑，因为我们向下钻取级别。

当我们向下钻取时，需要在面包屑中显示名称，用户应该能够导航。

类似Breadcrumbs in highchart-treemap的内容 但我找不到任何解决方案。让我知道如何实现这个目标

Answer 1

向下钻取事件不适用于树形图系列。相反，您可以使用点击事件来显示/销毁面包屑元素 - a label。

禁用向上钻取按钮：

Highcharts.seriesTypes.treemap.prototype.showDrillUpButton = function () {
  this.drillUpButton = {
    destroy: function () {}
  }
}

创建面包屑元素的功能如下所示：

function makeNode(id, name, series, prev) {
  const chart = series.chart
  const node = {
    id,
    name
  }
  let x = chart.plotLeft

  if (prev) {
    const { width, height, y } = prev.element.getBBox()
    x = width + prev.x + 10
    node.prev = prev
    prev.next = node

        prev.element.attr({
      anchorX: x,
      anchorY: chart.plotTop - 20 + height / 2
    })
  }

  node.destroyNext = function () {
    const next = this.next
    if (next) {
      next.destroyNext()
      next.element.destroy()
      delete this.next
      delete chart.bread[next.id]
    }
  }

  const element = node.element = chart.renderer.label(name, x, chart.plotTop - 20, 'callout').attr({
    fill: '#FFFFEF',
    stroke: 'gray',
    'stroke-width': 2,
    padding: 5,
    r: 5,
    zIndex: 10
  }).add()

  element.on('click', () => {
    node.destroyNext()
    node.element.attr({
      anchorX: undefined,
      anchorY: undefined
    })
    if (chart.series[0].rootNode !== '') series.drillToNode(id)
  })

  node.x = x
  return node
}

在图表加载上调用该函数：

chart: {
  events: {
    load: function() {
      this.bread = {
        '': makeNode('', this.series[0].name, this.series[0])
      }
    }
  }
},

和点击事件：

  plotOptions: {
   series: {
      point: {
        events: {
          click: function(e) {
            const hasChildren = !!this.node.childrenTotal

            if (hasChildren) {
              const bread = this.series.chart.bread
              bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
            }
          }
        }
      }
    }
  },

示例和输出

http://jsfiddle.net/z0zc1btk/