Как использовать Highcharts для построения диаграммы с квадрантами - PullRequest
Новая
       21

Как использовать Highcharts для построения диаграммы с квадрантами

0 голосов
/ 26 сентября 2018

Я ищу схему, подобную той, что на картинке.Мне нужно иметь возможность снабжать диаграмму данными, чтобы проценты и размер квадратов могли динамически изменяться.

enter image description here

Так что здесьмоя реализация пока использует 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]]
  }]
});

https://codepen.io/vassilis/pen/oPKPNr

1 Ответ

0 голосов
/ 27 сентября 2018

В вашем случае я бы использовал тип серии Highcharts scatter с вычисленным радиусом и данными, основанными на четырех значениях в массиве: 

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
});

Демонстрационная версия: http://jsfiddle.net/BlackLabel/rkmyfseq/

...