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

Question

我需要根据代码中的变量( left 、 right 、 center )动态填充数据系列的颜色。

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

$(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
 }],
 });
 });

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

Answer 1

您需要创建一条没有描边但填充的新路径。新路径应由您已定义的点组合而成。

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()

示例:http://jsfiddle.net/r0j46wn6/24/