Javascript 如何使用Highcharts制作带有象限的图表

我希望实现一个像图中那样的图表。我需要能够为图表提供数据，以便百分比和正方形的大小能够动态变化

以下是我迄今为止使用Highcharts的实现：

Highcharts.chart('container', {
  chart: {
    type: 'area',
    margin: [100,100,100,100],
    events: {
      load: function () {
        var ren = this.renderer,
        rightArrow = ['M', 0, 0, 'L', -5, 5, 'M', 0, 0, 'L', -5, -5],
        leftArrow = ['M', 0, 0, 'L', 5, -5, 'M', 0, 0, 'L', 5, 5],
        topArrow = ['M', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', -5, 5],
        bottomArrow = ['M', 0, 0, 'L', 5, -5, 'M', 0, 0, 'L', -5, -5];
        ren.path(rightArrow).attr({'stroke-width': 2,stroke: "black"}).translate(600,350).add();
        ren.path(leftArrow).attr({'stroke-width': 2,stroke: "black"}).translate(100,350).add();
        ren.path(topArrow).attr({'stroke-width': 2,stroke: "black"}).translate(350,100).add();
        ren.path(bottomArrow).attr({'stroke-width': 2,stroke: "black"}).translate(350,600).add();
      }
    }
  },
  title: false,
  tooltip: false,
  xAxis: {
    offset: -250,
    gridLineWidth: 1,
    min: -100,
    max: 100,
    tickInterval: 10,
    labels: false,
    lineColor: 'black',
    lineWidth: 2,
    title: false
  },
  yAxis: {
    offset: -250,
    gridLineWidth: 1,
    min: -100,
    max: 100,
    tickInterval: 10,
    labels: false,
    lineColor: 'black',
    lineWidth: 2,
    title: false
  },
  plotOptions: {
    area: {
      lineWidth: 1,
      allowPointSelect: false
    },
    series: {
      marker: {
        states: {
          hover: {
            enabled: false
          }
        }
      }
    }
  },
  series: [{
    data: [[1,1],[1,55],[55,55],[55,1],[1,1]]
  }, {
    data: [[-1,1],[-1,25], [-25,25], [-25,1],[-1,1]]
  }, {
    data: [[-1,-1],[-1,-35],[-35,-35],[-35,-1],[-1,-1]]
  }, {
    data: [[1,-1],[1,-15],[15,-15],[15,-1],[1,-1]]
  }]
});

---

在您的情况下，我将使用Highcharts散点系列类型，并根据数组中的四个值计算半径和数据：

var data = [10, 20, 5, 60],
    series = [];

series.push({
    data: [
        [data[0] / 2, data[0] / 2, data[0] / 2]
    ]
});

series.push({
    data: [
        [data[1] / 2, -data[1] / 2, data[1] / 2]
    ]
});

series.push({
    data: [
        [-data[2] / 2, -data[2] / 2, data[2] / 2]
    ]
});

series.push({
    data: [
        [-data[3] / 2, data[3] / 2, data[3] / 2]
    ]
});

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        margin: [100, 100, 100, 100],
        events: {
            load: function() {
                var xAxis = this.xAxis[0];

                Highcharts.each(this.series, function(s) {
                    s.points[0].update({
                        marker: {
                            radius: xAxis.toPixels(-100 + Math.abs(s.points[0].x)) - 100
                        }
                    });
                });
                ...
            }
        }
    },
    ...
    plotOptions: {
        series: {
            marker: {
                symbol: 'square'
            }
        }
    },
    series: series
});

---

现场演示：

要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决问题所做的工作。注意到您添加了一些示例代码，这些代码是否不符合您的需要？如果是，请使用此信息更新问题。还应该确保代码是一个。非常好！比区域更适合。。。分散的数据更有意义。非常感谢。