高图子弹图图背景颜色始终可见

Question

因此，我已经设置了在最新的highchart CDN上运行的项目符号图表。

https://codepen.io/anon/pen/GzBGbm?&editable=true

Highcharts.setOptions({
  chart: {
    inverted: true,
    marginLeft: 135,
    type: 'bullet',
    backgroundColor: 'red',
    plotBackgroundColor: 'yellow'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  xAxis:{
     lineWidth: 0,
     tickWidth:0,
     minorGridLineWidth: 0,
        gridLineWidth: 0,
  },
  yAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    tickWidth: 0,
    tickLength: 0,
  },
  plotOptions: {
    series: {
      pointPadding: 0.25,
      borderWidth: 0,
      color: '#000',
      targetOptions: {
        width: '200%'
      }
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
});

Highcharts.chart('container1', {
  chart: {
    marginTop: 40
  },
  title: {
    text: '2017 YTD'
  },
  xAxis: {
    categories: ['<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)']
  },
  yAxis: {
    plotBands: [{
      from: 0,
      to: 151,
      color: '#666'
    }, {
      from: 150,
      to: 226,
      color: '#999'
    }, {
      from: 225,
      to: 302,
      color: '#bbb'
    }],
    title: null
  },
  series: [{
    data: [{
      y: 275,
      target: 250
    }]
  }],
  tooltip: {
    pointFormat: '<b>{point.y}</b> (with target at {point.target})'
  }
});

此项目符号图同时具有绘图和全局背景色（分别为黄色和红色）

1）为什么仍然在下面突出显示的区域中看到绘图背景颜色？

2）尽管使用了当前的配置，但我在xAxis线上仍然看到一个棕色（有阴影的阴影？）-如何解决这个问题？

Answer 1

通过将chart.plotBorderWidth = 2和chart.plotBorderColor设置为与chart.backgroundColor相同的颜色，可以消除此黄色边框。查看下面发布的演示和代码。

代码：

Highcharts.setOptions({
  chart: {
    inverted: true,
    marginLeft: 135,
    type: 'bullet',
    backgroundColor: 'red',
    plotBackgroundColor: 'yellow',
    plotBorderWidth: 2,
    plotBorderColor: 'red'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  xAxis:{
     lineWidth: 0,
     tickWidth:0,
     minorGridLineWidth: 0,
        gridLineWidth: 0,
  },
  yAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    tickWidth: 0,
    tickLength: 0,
  },
  plotOptions: {
    series: {
      pointPadding: 0.25,
      borderWidth: 0,
      color: '#000',
      targetOptions: {
        width: '200%'
      }
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
});

Highcharts.chart('container1', {
  chart: {
    marginTop: 40
  },
  title: {
    text: '2017 YTD'
  },
  xAxis: {
    categories: ['<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)']
  },
  yAxis: {
    plotBands: [{
      from: 0,
      to: 151,
      color: '#666'
    }, {
      from: 150,
      to: 226,
      color: '#999'
    }, {
      from: 225,
      to: 302,
      color: '#bbb'
    }],
    title: null
  },
  series: [{
    data: [{
      y: 275,
      target: 250
    }]
  }],
  tooltip: {
    pointFormat: '<b>{point.y}</b> (with target at {point.target})'
  }
});

#container1 {
    max-width: 800px;
    height: 115px;
    margin: 1em auto;
}
#container2, #container3 {
    max-width: 800px;
    height: 85px;
    margin: 1em auto;
}
.hc-cat-title {
  font-size: 13px;
  font-weight: bold;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>

演示：

• https://jsfiddle.net/BlackLabel/uohgv9b4/