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

Question

I need to fill the color of data series dynamically based on the variable ( left , right , center ) from my code.

I have attached my code and expected output:

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

And my expected output should look like below,

Answer 1

You need to create a new path with no stroke but fill. The new path should be combined from the points you already defined.

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

example: http://jsfiddle.net/r0j46wn6/24/

Answer 2

You can make use of the .css() method of your this.renderer.path() to set the fill style.

For example, Let's take the case of curveTopRight for what you can add that css as,

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

However it is working only for the curved elements and not for the area's which are between the lines that you have drawn.

Here is a partially working example:

http://jsfiddle.net/r0j46wn6/23/

Hope this helps!