Question

我正在使用散点图。并试图实现这一目标：

到目前为止，我根据需要放置了绿色标记，并绘制了一个红色标记。唯一剩下的就是突出显示所有绿色和红色标记出现的区域。

我到目前为止创造了这个东西：

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

Answer 1

对于矩形，您可以使用带有四个点的多边形系列作为数据，并将系列颜色设置为某个模式 - 模式可以与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/

使用Highcharts突出显示散点图中的区域

1 个答案: