Репликация табличного отчета в JavaScript - PullRequest
Новая
       42

Репликация табличного отчета в JavaScript

0 голосов
/ 06 октября 2019

Я пытаюсь воспроизвести приведенный ниже график в Angular. Я уже пробовал NgxCharts 2-й график ниже и графики js, но ни один из них не может воспроизвести нечто подобное (или я не знаю, как сделать это более гибким). Desired Result

HTML 

<div class="graph-container flex">
  <div class="graph flex1">
      <ngx-charts-line-chart
        [scheme]="colorScheme"
        [results]="multi"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [xScaleMax]="xScaleMax"
        [showRefLines]="false"
        (select)="onSelect($event)">
    </ngx-charts-line-chart>
  </div>
  <div class="graph flex1">
      <ngx-charts-line-chart
        [scheme]="colorScheme"
        [results]="multi"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [showXAxisLabel]="showXAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="false"
        (select)="onSelect($event)">
    </ngx-charts-line-chart>
  </div>
  <div class="graph flex1">
      <ngx-charts-line-chart
        [scheme]="colorScheme"
        [results]="multi"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [showXAxisLabel]="showXAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="false"
        (select)="onSelect($event)">
    </ngx-charts-line-chart>
  </div>
</div>

TS: 

// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = false;
xAxisLabel = 'Country';
showYAxisLabel = false;
yAxisLabel = 'Population';
xScaleMax=1;
colorScheme = {
  domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

Current Result Буду очень признателен, есликто-то может помочь мне с предложениями воспроизвести этот вид графиков с помощью библиотеки или некоторой пользовательской реализации.

...