如何在3D Highcharts上设置背景图像？

Question

I'd like to set an image of a map - or, better yet, a generated map - on the xz plane of a high-charts graph. Is there a way to do this with background image? I understand you can set the color of the back, bottom, and side frame, is there any way to set images for those frames?

Answer 1

You can use SVG <pattern> element with <image> added inside of it, and set the chart.options3d.frame.bottom.color equal to this pattern, just like that:

First you need to create new pattern basing on current dimensions of mentioned frame . The best place to implement it, should be the chart.events.load function:

chart: {
    events: {
      load() {
        var chart = this
        var frameBottomDim = chart.frameShapes.bottom.element.getBBox()
        var defs = document.querySelectorAll('defs')[0]
        var pattern = chart.renderer.createElement('pattern')
        var img = chart.renderer.createElement('image')

        pattern.attr({
          "patternUnits": "userSpaceOnUse",
          "x": frameBottomDim.x,
          "y": frameBottomDim.y,
          "width": frameBottomDim.width,
          "height": frameBottomDim.height,
          "id": "frameBg",
        })

        img.attr({
          "href": "https://static.makeuseof.com/wp-content/uploads/2010/03/clouds-1-670x335.jpg",
          "width": frameBottomDim.width,
          "height": frameBottomDim.height,
          preserveAspectRatio: 'none'
        })

        img.add(pattern)
        pattern.add(this.renderer.defs)

      }
    }
}

Then set the frame color property to url(#[pattern_name]) :

 options3d: {
      enabled: true,
      alpha: 10,
      beta: 20,
      depth: 400,
      frame: {
        bottom: {
          color: 'url(#frameBg)'
        }
      }
    }

Live example: https://jsfiddle.net/h8tv4xpg/

Web API Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern