使用Highcharts突出顯示散點圖中的一個區域

我正在使用散點圖。並試圖實現這一點：使用Highcharts突出顯示散點圖中的一個區域

到目前爲止，我已根據需要放置了綠色標記，並且還繪製了一個紅色標記。唯一剩下的就是突出顯示所有綠色和紅色標記出現的區域。

我創造了這個事情到目前爲止：

$(function() { 
$('#container').highcharts({ 
    title: { 
     text: '' 
    }, 
    chart: { 
     backgroundColor: 'rgba(0,0,0,0)', 
     type: 'scatter', 
     style: { 
      fontFamily: 'Helvetica', 
      fontSize: '16px' 
     }, 
     width: 500, 
     height: 500 
    }, 
    credits: { 
     enabled: false 
    }, 
    xAxis: { 
     minRange: 1, 
     title: { 
      enabled: true, 
      text: 'Strategic Alignment' 
     }, 
     startOnTick: true, 
     endOnTick: true, 
     showLastLabel: true, 
     min: 0, 
     max: 5 
    }, 
    yAxis: { 
     minRange: 1, 
     gridLineWidth: 0, 
     minorGridLineWidth: 0, 
     title: { 
      text: 'Process & Technology Integration' 
     }, 
     style: { 
      fontWeight: 'bold', 
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' 
     }, 
     lineWidth: 1, 
     min: 0, 
     max: 5 
    }, 
    tooltip: { 
     enabled: false, 
    }, 
    series: [{ 
      showInLegend: false, 
      name: ' ', 
      color: 'Red', 
      lineWidth: 1, 
      marker: { 
       radius: 10, 
       symbol: "url(data:image/png;base64,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)" 
      }, 
      data: [ 
       [-9999, 3], 
       [3, 3], 
       [3, -9999] 
      ], 
      dataLabels: { 
       enabled: false, 
      } 
     }, { 
      showInLegend: false, 
      type: 'scatter', 
      data: [ 
       [1.1, 2.1], [3.1, 1.1], [3, 4], [1.9, 1.5], [2.9, 1.9], 
      ], 
      marker: { 
       symbol: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAqCAMAAAFuLbL8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHdUExURQAAAKP9rZ38qaT9rqP9rQjnIVXxZq7+tqb9r2f0doX5kav+taz+tHb3haX9rq3+tq3+tqH8q6//r6f+slfyZ4f5k1rya6T8rRDoKIb5kh7qNZD6nJv7pqP9rKz/t63+uZT7oCzsQa//t6v+s6P9raj9sZ/8qxnqL6X+sKj9s6r/tKT9rybrPK3/tqT9rFnyagXnHoL4jmr1eaP9raL9rKT9ra7/tmz1eq//tK7/txPpKqX9r6z+tFfzaEzwXqj+sSHrNnT2g67+t4T5kKP9rKL8rLL/sqf9sa3+tqb9sKT9raL9rGDzcVvybCnsPrH+uKT9rqr/tKH8rDfuSqv+tK//taP9rqL9rK3+t6X9sKP9raf9sCPrOaz/uKb9sJv7pqT8rpP6nnr3hzHtRqb9r6T9rab9r6//tz/vUq3+tp/8qoP4j6P8rK7+t63/t6X9rpb7oF7zbkLuVW/2fk3wXnP2ggPmHJ/8qaT9rkfwWqX8r6r/v3z3iov6l578qaj+sqr+s0rvXKX9rmHzca3+tor5l67+tqf9so36mVbyZob5kp//vy7tQ63+uDzvT5n7o6b9r6X9r7//v3b3haH9q538p0rxXKj9sqb9sADmGWv1eqf9sa3+toj5lQ7oJeNLwGMAAACedFJOUwC2weu+//1c7vfuNL3vwXAc9RB0+fH75P/y//D1w0Qs8v8gesuHvv9+9hja//DH+f/1/62m9Tz6MP//1n7//ZD/8qfx0KoU9FTt39H6+f8k52b0//5QurNk9ujx/yiW9Ovx9P/y5J5g/3TQ89logJ/0+f3/+/X/887/9wz0//R8y/2J+Dj0m/Pv+/MI/0j/8I2GBPWr8v/36f/0+Fjz58u8dgAAAAlwSFlzAAAXEQAAFxEByibzPwAAAlFJREFUOE+FlAdXE0EUhZ8lGisx2AsWrBjBgtEgQmzBDkawEbGAim1tGEsUxa5JFFCMT2J+qzPzbsjsIeU7J3n33nlnd8rukpusM3uec0sJZuOlzCV6a6xBR47DjkMU47AOstKc5zWqIsLtIvwsRIzLKDVuFJFH/XIiS3HjGARRXG7lKFhNQU/io1z5m86HteoxLWruWAQFeeEj7jLy5HqiVV+NTOq/USPzbEN1EeQaKJtZfArKYrq65WFoxZmzeg4WvdUy4IXXdEtkqEJWCy+8QNoPb7jE/EyVKPNnCTS+IVklUc3AZahyJBMQNo27IGzWfIGwCW+CsKhl3gBZYJw5ClngO3MKUg5U8Umv8yAM0UWzbovduvdcE5whV28uQMEGBIqWtGTqfAcR8Ur7qJ9KtgfWkPRIuF2eUeGXZMwbEWhWKN+xJM68CIFmOcc2E1WnuAmBoplf1ekaucutJtC87IOg7jEIogeoCjy+RahCrUg6NBOqEt7YFvMeVOTdYm65CV2W9gVqd358gCvHiZTqjB2HK8OFA/oE+O9t+JIkMnKG8Yx9hobEkdCT/RZrTSNzAN6wMzTFr5v3/nmvTrck8YarQXNRw5uoXkcxAoMj7u8L1dXvyGGwgOf6Ph/GXaTbhtAhPO7LYmQSU/vRI6TuIJ9E1zK05Pmpv/ZFGG3DW5Z62CvCkyn+pPTM0KO5Q/P9lDj/b6k2vxsx5mL1mBoa8Oa/pnOm6Tf2mrWTE9w7Hb4y7Nq6kcFAuAPa4n7n1nWQBXzPO5shJ0iW2rqjsiii/6CAKuQej0tdAAAAAElFTkSuQmCC)" 
      }, 
      dataLabels: { 
       enabled: false, 
      } 
     } 
    ] 


}); 

});

我重視這個代碼。請幫助我做什麼或如何實現這一目標？這裏是的jsfiddle：http://jsfiddle.net/seebu/g3q8eLq5/#fork

來源

2017-05-03 Awais Ayub

對於您可以使用四個點的多邊形一系列數據和該系列顏色設置爲某種模式矩形 - 模式可以Highcharts圖案填充插件docs here使用。對於與您具有完全相同的模式，您可能需要創建自己的模式。

定義圖案

defs: { 
    patterns: [{ 
    'id': 'custom-pattern', 
    'path': { 
     d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11', 
     stroke: 'red', 
     strokeWidth: 2 
    } 
    }] 
},

配置爲多邊形系列：

{ 
    type: 'polygon', 
    enableMouseTracking: false, 
    showInLegend: false, 
    data: [ 
    [50, 10], 
    [50, 100], 
    [120, 100], 
    [120, 10] 
    ], 
    zIndex: -99, 
    color: 'url(#custom-pattern)' 
    }

例如：http://jsfiddle.net/m18rtzf6/

來源

2017-05-04 11:34:14 morganfree

使用Highcharts突出顯示散點圖中的一個區域

回答

相關問題