Карта маркера Highchart цвет фона всегда виден

Question

Итак, я установил диаграмму, работающую на последнем 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/