Создание диаграммы в angular2 для отображения медианного значения данных

Question

Я создаю диаграмму в Angular 2, которая показывает медианное значение для данных и отображает значение для данного имени.Как я могу построить оба?Я пробую с plotLines и группами, но я все еще не могу это сделать.Вот мой код.

Я пытаюсь добиться такого результата.

Мой код

import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import Highcharts from 'highcharts';
import Bellcurve from 'highcharts/modules/histogram-bellcurve';
Bellcurve(Highcharts);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test-app';
  data = [];
  medianvalue:number;
  lenght:number
  medianNumber:any;
  //name :any;
  ngOnInit() {

  }
  constructor() {
    this.getLenght();
}
  candidateScoreList = [
    {
      "name": "Khushroo",
      "totalScore": 49.07142857142857
    },
    {
      "totalScore": 48.214285714285715
    },
    {
      "totalScore": 42.857142857142854
    },
    {
      "totalScore": 19.642857142857142
    },
    {
      "totalScore": 46.42857142857143
    },
    {
      "totalScore": 73.21428571428572
    },
    {
      "totalScore": 85.71428571428572,
    },
    {
      "totalScore": 39.285714285714285
    },
    {
      "totalScore": 14.285714285714285
    },
    {
      "totalScore": 80.35714285714286
    },
    {
      "totalScore": 41.07142857142857,

    },
    {
      "totalScore": 66.07142857142857
    },
    {
      "totalScore": 73.21428571428572
    },
    {
      "totalScore": 85.71428571428572
    },
    {
      "totalScore": 66.07142857142857
    },
    {
      "totalScore": 73.21428571428572
    },
    {
      "totalScore": 39.285714285714285
    },
    {
      "totalScore": 71.42857142857143
    },
    {
      "totalScore": 41.07142857142857
    },
    {
      "totalScore": 71.42857142857143
    },

    {
      "totalScore": 25
    },
    {
      "totalScore": 67.85714285714286
    },
    {
      "totalScore": 53.57142857142857
    },
    {
      "totalScore": 41.07142857142857
    },
    {
      "totalScore": 60.714285714285715
    },
    {
      "totalScore": 85.71428571428572
    },
    {
      "totalScore": 80.35714285714286
    },
    {
      "totalScore": 41.07142857142857
    },
    {
      "totalScore": 78.57142857142857
    },
    {
      "totalScore": 19.642857142857142
    },
    {
      "totalScore": 78.57142857142857
    },
    {
      "totalScore": 33.92857142857143
    },
    {
      "totalScore": 46.42857142857143
    },
    {
      "totalScore": 66.07142857142857
    },
    {
      "totalScore": 46.42857142857143
    },
    {
      "totalScore": 46.42857142857143
    },
    {
      "totalScore": 25
    },
    {
      "totalScore": 53.57142857142857
    },
    {
      "totalScore": 58.92857142857143
    },
    {
      "totalScore": 85.71428571428572
    }
  ];
  labels = ['Median Score','Kushboo score'];

  getLenght(){
    this.lenght = this.candidateScoreList.length;
    this.medianNumber = (this.lenght)/2
    console.log(this.lenght);
    this.iterateJson();
    this.getMedian();
  }

  getMedian(){
    this.medianvalue = this.candidateScoreList[this.medianNumber].totalScore;
    console.log(this.medianvalue);
  }

  iterateJson() {
    for (var i = 0; i < this.candidateScoreList.length; i += 1) {
      this.data[i]=  this.candidateScoreList[i].totalScore;
      console.log(this.data,length,this.medianvalue);
    }
  }


  chart = new Chart({
    title: {
      text: 'Overall Assessement score',
    },
    xAxis: [{
      title: { text: 'scores in %' },
      alignTicks: false
    }, {
      title: { text: '' },
      alignTicks: false,
      opposite: false
    }],

    yAxis: [{
      title: { text: 'No of Student' }
    }, {
      title: { text: '' },
      opposite: false
    }],
    series: [{
      name: '',
      type: 'bellcurve',
      xAxis: 1,
      yAxis: 1,
      baseSeries: 's1',
      zIndex: -1
    }, {
      name: '',
      type: 'scatter',
      data: this.data,
      visible: false,
      id: 's1',
      marker: {
        radius: 1.5
      }
    }]
  });
}

Answer 1

Вы можете создать такую ​​диаграмму, используя areaspline тип диаграммы (чтобы показать все оценки) и scatter точки, чтобы показать конкретные оценки.Для построения линий ниже точек можно использовать рендерер SVG.Я воспроизвел диаграмму, представленную на фото, в чистом виде.Впрочем, это легко сделать в угловом приложении.

Код:

Highcharts.chart('container', {
  chart: {
    height: 300,
    type: 'areaspline',
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          point,
          svgElem,
          x1,
          y1,
          y2;

        if (chart.customSvgElements) {
          chart.customSvgElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customSvgElements = [];

        chart.series.forEach(function(series) {
          if (series.options.type === 'scatter') {

            point = series.points[0];

            x1 = point.plotX + chart.plotLeft;
            y1 = point.plotY + chart.plotTop + point.graphic.radius;
            y2 = chart.plotTop + chart.plotHeight;

            svgElem = chart.renderer.path([
                'M', x1, y1, 'L', x1, y2, 'z'
              ])
              .attr({
                stroke: point.color,
                'stroke-width': 1
              })
              .add()
              .toFront();

            chart.customSvgElements.push(svgElem);
          }
        });
      }
    }
  },
  yAxis: {
    max: 150
  },
  plotOptions: {
    scatter: {
      showInLegend: false,
      marker: {
        symbol: "circle",
        radius: 5
      },
      dataLabels: {
        enabled: true,
        align: 'left',
        x: -10,
        y: -5,
        formatter: function() {
          var header = '<span style="color: ' + this.series.color + ';">' + this.series.name + '</span>',
            footer = '<span style="color: ' + this.series.color + ';">' + this.x + '%</span>';

          return header + '<br>' + footer;
        }
      }
    }
  },
  series: [{
    name: 'Scores',
    data: [
      [0, 0],
      [10, 10],
      [20, 45],
      [30, 80],
      [40, 45],
      [50, 10],
      [60, 0],
      [70, 3],
      [80, 15],
      [90, 2],
      [100, 0]
    ],
    marker: {
      enabled: false
    }
  }, {
    name: "Median score",
    type: 'scatter',
    color: '#888',
    data: [
      [37, 59]
    ]
  }, {
    name: "Khushroo's score",
    type: 'scatter',
    color: '#2E5D7C',
    data: [
      [49, 13]
    ]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Демонстрация:

• https://jsfiddle.net/BlackLabel/zy981n4x/

Ссылка API:

• https://api.highcharts.com/highcharts/chart.events.render

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront