Highcharts 剧情背景

Question

是否可以创建如下图所示的 Highcharts 绘图背景？重要的是它会在绘图放大/缩小时进行调整。

例如使用 radialGradient，但颜色之间没有“渐变”。

Answer 1

以下示例只是使用 SVGrenderer 的起点:

Highcharts.chart('container', {
    chart: {
        type: 'scatter'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
}, function(chart) {
  var yAxis = chart.yAxis[0], 
  y = yAxis.top+yAxis.height, 
  x = chart.plotLeft,
  h = yAxis.height;
  svg = chart.renderer;
  
  svg.arc(x,y,h/3,0,1.5*Math.PI,0)
    .attr({
    fill: '#dce6f2',
    'stroke-width': 0,
    zIndex: -1
  }).add();
  
  svg.arc(x,y,2*h/3,0,1.5*Math.PI,0)
    .attr({
    fill: '#c5d8f1',
    'stroke-width': 0,
    zIndex: -2
  }).add();
  
  svg.arc(x,y,h,0,1.5*Math.PI,0)
    .attr({
    fill: '#95b3d7',
    'stroke-width': 0,
    zIndex: -3
  }).add();
  
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>