Javascript 如何在highcharts数据系列中添加填充颜色

我需要根据代码中的变量（左、右、中）动态填充数据系列的颜色

我已附上我的代码和预期输出：

$(document).ready(function() {
var left = [
  [4, 7],
  [9, 2]
];
var right = [
   [2, 2],
   [9, 9]
];

var center = [
        [4,5.5],
        [10,5.5] 
];

 Highcharts.chart('container', {
  chart: {
  events: {
   load: function () {
     const xAxis = this.xAxis[0]
     const yAxis = this.yAxis[0]

     const leftBottom = {
       x: xAxis.toPixels(right[0][0]),
       y: yAxis.toPixels(right[0][1])
     }

     const leftTop = {
       x: xAxis.toPixels(left[0][0]),
       y: yAxis.toPixels(left[0][1])
     }

     const rightBottom = {
       x: xAxis.toPixels(left[1][0]),
       y: yAxis.toPixels(left[1][1])
     }

     const rightTop = {
       x: xAxis.toPixels(right[1][0]),
       y: yAxis.toPixels(right[1][1])
     }

    const leftMiddle = {
       x: xAxis.toPixels(4),
       y: yAxis.toPixels(5.5)
     }

     const rightMiddle = {
       x: xAxis.toPixels(10),
       y: yAxis.toPixels(5.5)
     }

     const leftTopMiddle = {
       x: xAxis.toPixels(3.7),
       y: yAxis.toPixels(6.5)
     }

    const leftBottomMiddle = {
       x: xAxis.toPixels(2.1),
       y: yAxis.toPixels(4)
     }




     const rightTopMiddle = {
       x: xAxis.toPixels(9.8),
       y: yAxis.toPixels(8)
     }

     const rightBottomMiddle = {
       x: xAxis.toPixels(9.8),
       y: yAxis.toPixels(3)
     }





     const curveTopLeft = this.curveTopLeft = this.renderer.path().attr({
       d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()

       const curveBottomLeft = this.curveBottomLeft = this.renderer.path().attr({
      d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftBottom.x} ${leftBottom.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()


       const curveTopRight = this.curveTopRight = this.renderer.path().attr({
       d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()

       const curveBottomRight = this.curveBottomRight = this.renderer.path().attr({
      d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightBottom.x} ${rightBottom.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()


   }
 }
 },

  title: {
    text: ''
  },

   tooltip: {
     enabled: false
   },

   exporting: {
      enabled: false
   },

   credits: {
     enabled: false
   },


   plotOptions: {
     series: {
     pointStart: 1

   }
 },

  xAxis: {
   max: 10,
   min: 1,
   tickInterval: 1
 },

  yAxis: {
    max: 11,
    min: 0,
    tickInterval: 1,

  },
 series: [{
    showInLegend: false,
    data: left
 }, {
   showInLegend: false,
   data: right
 },
  {
 showInLegend: false,
      marker: {
               enabled: true
     },
     data: center
 }],
 });
 });

我的预期输出应该如下所示

---

您可以使用

this.renderer.path（）的
.css（）
方法来设置填充样式

例如，让我们以
curveTopRight
为例，了解您可以将css添加为什么

const curveTopRight = this.curveTopRight = this.renderer.path().css({
    color: '#c8bfe7',
    fill: '#c8bfe7'
 }).attr({
   d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
   'stroke-width': 2,
   stroke: 'red',
   zIndex: 99
 }).add()

但是，它仅适用于曲线图元，而不适用于您绘制的线之间的区域

下面是一个部分工作的示例：


希望这有帮助
 您可以使用
this.renderer.path（）
的
.css（）
方法来设置填充样式

例如，让我们以
curveTopRight
为例，了解您可以将css添加为什么

const curveTopRight = this.curveTopRight = this.renderer.path().css({
    color: '#c8bfe7',
    fill: '#c8bfe7'
 }).attr({
   d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
   'stroke-width': 2,
   stroke: 'red',
   zIndex: 99
 }).add()

但是，它仅适用于曲线图元，而不适用于您绘制的线之间的区域

下面是一个部分工作的示例：


希望这有帮助
 您需要创建一个没有笔划但填充的新路径。新路径应与已定义的点合并

const d = `M ${leftBottom.x} ${leftBottom.y} 
           Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftMiddle.x} ${leftMiddle.y} 
           Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y} 
           L ${rightBottom.x} ${rightBottom.y} 
           Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightMiddle.x} ${rightMiddle.y} 
           Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y} 
           Z`

const fillPath = this.renderer.path().attr({
  d: d,
  'stroke-width': 0,
  fill: '#b19cd9',
  zIndex: 1
}).add()

例如：
您需要创建一个没有笔划但填充的新路径。新路径应与已定义的点合并

const d = `M ${leftBottom.x} ${leftBottom.y} 
           Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftMiddle.x} ${leftMiddle.y} 
           Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y} 
           L ${rightBottom.x} ${rightBottom.y} 
           Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightMiddle.x} ${rightMiddle.y} 
           Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y} 
           Z`

const fillPath = this.renderer.path().attr({
  d: d,
  'stroke-width': 0,
  fill: '#b19cd9',
  zIndex: 1
}).add()

例如：
能否请您提供一个工作的JSFIDLE链接供我们检查？请检查此JSFIDLE.net/r0j46wn6/18能否请您提供一个工作的JSFIDLE链接供我们检查？请检查此JSFIDLE.net/r0j46wn6/18谢谢您的回复。实际上我想要全面积的填充color@Nisanth是的，我理解，填充线条在它们之间形成的区域是一种未记录的。我从我这边开始尝试。如果你找到了任何解决办法，请用你的答案更新帖子，这样一些人可能会从中受益。当然如果我得到答案，我将在这里发布。谢谢你的回复。实际上我想要全面积的填充color@Nisanth是的，我理解，填充线条在它们之间形成的区域是一种未记录的。我从我这边开始尝试。如果你找到了任何解决办法，请用你的答案更新帖子，这样一些人可能会从中受益。当然如果我得到答案，我将在这里发布。