Highcharts：连接每个标记的线的自定义区域轮廓

Question

我正在尝试将渐变颜色应用到区域系列的轮廓上，该颜色取决于两端标记的颜色，每条线的颜色都不同。使用过的 highcharts multicolor_series 模块，出于某种原因，它只绘制和着色 2 行的轮廓，而不是 draw/completes 最后一行。这是我的 JSFiddle link：https://jsfiddle.net/pgkk/s29d51zt/872/ 你能帮我解决这个问题吗，我哪里出错了？提前致谢。

"credits": {
    "enabled": false
  },
  "chart": {
    // backgroundColor: '#F5F7F7',
    "polar": true,
    "height": 190,
    "width": 290,
    "minWidth": 250,
    "marginBottom": -25,
    "style": {
      "fontFamily": [
        "WhitneyNarrBook",
        "Roboto",
        "Arial",
        "sans-serif"
      ],
      "fontWeight": 400,
      "fontSize": 11,
      "letterSpacing": "-0.06px",
      "lineHeight": "16px"
    }
  },
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "min": 0,
    "gridZIndex": 4,
    "gridLineColor": "#dce1e6",
    "lineColor": "#dce1e6",
    "categories": [
      "Cat1",
      "Cat2",
      "Cat3"
    ],
    "tickmarkPlacement": "on",
    "lineWidth": 0,
    "labels": {
      "useHTML": true,
      "align": "center",
      "style": {
        "whiteSpace": "nowrap",
        "color": "#26415e",
        "fontSize": "12px"
      }
    }
  },
  "yAxis": {
    "gridLineInterpolation": "polygon",
    "gridZIndex": 4,
    "gridLineColor": "#dce1e6",
    "lineColor": "#dce1e6",
    "min": 0,
    "max": 100,
    "showFirstLabel": false,
    "showLastLabel": true,
    "tickInterval": 25,
    "labels": {
      "align": "center",
      "y": 5,
      "x": 0,
      "style": {
        "color": "#333333",
        "fontSize": "10px"
      }
    }
  },
  "plotOptions": {
    "series": {
      "marker": {
        "radius": 2.5
      },
      "states": {
        "hover": {
          "enabled": false
        },
        "inactive": {
          "enabled": false
        }
      }
    },
    "area": {
      "dataLabels": {
        "enabled": false
      }
    }
  },
  "series": [{
      "showInLegend": false,
      "data": [
        100,
        100,
        100
      ],
      "color": {
        "radialGradient": {
          "cx": 0.5,
          "cy": 0.7,
          "r": 0.5
        },
        "stops": [
          [
            0,
            "#DFA124"
          ],
          [
            0.55,
            "#AF9D3F"
          ],
          [
            0.75,
            "#5A9772"
          ],
          [
            1,
            "#229595"
          ]
        ]
      },
      "pointPlacement": "on",
      "marker": {
        "symbol": "circle"
      },
      "fillOpacity": 0.5,
      "type": "area",
      "lineColor": "transparent"
    },
    {
      "showInLegend": false,
      "data": [{
          "y": 33,
          "color": "#AF9D3F"
        },
        {
          "y": 65,
          "color": "#229595"
        },
        {
          "y": 28,
          "color": "#DFA124"
        }
      ],
      zIndex: 5,
      "pointPlacement": "on",
      "type": "area",
      //lineWidth: 5,
      //lineColor: 'gray',
      "color": "transparent",
      "marker": {
        "symbol": "circle"
      }
    },
    {
      "showInLegend": false,
      "data": [
        [
          33,
          100
        ],
        [
          65,
          100
        ],
        [
          28,
          100
        ]
      ],
      "pointPlacement": "on",
      "type": "arearange",
      "fillColor": "white",
      "opacity": 1,
      "lineColor": "transparent",
      "marker": {
        "fillColor": "#dce1e6",
        "lineColor": "#dce1e6"
      }
    },
    {
      type: 'coloredline',
      showInLegend: false,
      pointPlacement: "on",
      data: [{
        y: 33,
        segmentColor: {
          linearGradient: {
            x1: 0,
            x2: 0,
            y1: 0,
            y2: 1
          },
          stops: [
            //[0, '#AF9D3F'], // start
            [0.5, '#AF9D3F'], // middle
            [1, '#229595'] // end
          ]
        }
      }, {
        y: 65,
        segmentColor: {
        linearGradient: {
            x1: 0,
            x2: 0,
            y1: 0,
            y2: 1
          },
          stops: [
            //[0, '#AF9D3F'], // start
            [0.25, '#DFA124'],
            [1, '#229595'] // middle
          ]
        }
      }, {
        y: 28,
        "segmentColor": {
          "linearGradient": {
            "x1": 0,
            "x2": 0,
            "y1": 0,
            "y2": 1
          },
          "stops": [
            [
              0.5,
              "#229595"
            ],
            [
              1,
              "#DFA124"
            ]
          ]
        }
      },
      ]
    }
  ]

Answer 1

对于每个轮廓，您可以添加单独的线条系列以及相应的渐变和禁用标记。尝试 fiddle link

    {
      "pointPlacement": "on",
      "showInLegend": false,
      data: [
        [33],
        [65],
        [null]
      ],

      type: 'line',
      marker: {
        enabled: false
      },
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, '#AF9D3F'],
          [1, '#229595']
        ]
      }

    }, {
      "showInLegend": false,
      "pointPlacement": "on",
      data: [
        [null],
        [65],
        [28],
      ],

      type: 'line',
      marker: {
        enabled: false
      },
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, '#AF9D3F'],
          [1, '#229595']
        ]
      }


    }, {
      "showInLegend": false,
      "pointPlacement": "on",
      data: [
        [33],
        [null],
        [28],
      ],
      type: 'line',
      marker: {
        enabled: false
      },
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, '#AF9D3F'],
          [1, '#AF9D3F']
        ]
      }
    }

https://jsfiddle.net/koushlendra/o5dujm0z/719/

Highcharts：连接每个标记的线的自定义区域轮廓

Highcharts: Custom area outline for line joining each marker

reactjs

highcharts

react-highcharts