Mettez en surbrillance une région dans un nuage de points à l'aide de graphiques hauts

Question

J'utilise un diagramme de dispersion. et en essayant de réaliser ceci:

jusqu'ici j'ai placé les marqueurs verts selon mon besoin et ai également dessiné un marqueur rouge. la seule chose qui reste est de mettre en évidence la région dans laquelle apparaissent tous les marqueurs verts et rouges.

i ont créé cette chose jusqu'à présent:

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


}); 

}); 

Je joins le code pour cela. S'il vous plaît aidez-moi à faire quoi ou comment puis-je y parvenir? ici est le jsFiddle: http://jsfiddle.net/seebu/g3q8eLq5/#fork

Answer 1

Pour le rectangle, vous pouvez utiliser une série de polygones avec quatre points de données et définir la couleur de la série à un certain modèle - modèle peut être utilisé avec le plugin Highcharts modèle de remplissage docs here. Pour exactement le même modèle que vous avez, vous devrez peut-être créer votre propre modèle.

définir un motif

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 
    } 
    }] 
}, 

Config pour la série de polygones:

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

exemple: http://jsfiddle.net/m18rtzf6/