IONI C Диаграмма. js Проблема со смешанными типами диаграмм - PullRequest
Новая
       6

IONI C Диаграмма. js Проблема со смешанными типами диаграмм

0 голосов
/ 16 июня 2020 
// TYPESCRIPT CODE //

// Chart.js: Data, Options, Search
chartData: ChartDataSets[] = [{ data: [], label: 'Confirmed' }];
chartLabels: Label[];

// Options
chartOptions = {
  responsive: true,
  title: {
    display: true,
    text: 'COVID-19 Chart'
  },
  pan: {
    enabled: true,
    mode: 'xy'
  },
  zoom: {
    enabled: true,
    mode: 'xy'
  }
};
chartColors: Color[] = [
  {
    // borderColor: '#3BB0FF',
    backgroundColor: '#3BB0FF'
  }
];
chartType = 'line';
showLegend = false;


// Get data function added after constructor
  getData() {
    this.http.get(`https://api.covid19api.com/total/country/${this.country}/status/${this.status}?from=${this.dateOne}T00:00:00Z&to=${this.dateTwo}T00:00:00Z`).subscribe((res: any) => 
    {
      console.log('Res: ', res);

      // first chart
      this.chartData[0].data = [];
      this.chartLabels = [];

      for (let entry of res) {
        // splitting Date from Date and Time that was provided from dataset

        // first chart
        this.chartLabels.push(entry.Date.split('T')[0]);
        this.chartData[0].data.push(entry['Cases']);
      }
      console.log('data: ', this.chartData);
    });
  }

// HTML CODE //

<canvas width= "400" height= "480" baseChart [datasets]="chartData" [labels]="chartLabels" 
  [chartType]="chartType" [colors]="chartColors" [legend]="showLegend" [options]="chartOptions">
  </canvas>

Выше приведен код Ioni c для диаграммы. js функция плагина, которая отображает данные в виде одной линейной диаграммы, взятой из API. У меня возникают проблемы с реализацией функции смешанного типа диаграммы, которая позволяет использовать два перекрывающихся набора данных на одном холсте.

Я просмотрел документацию для смешанного типа диаграммы (ссылка на которую приведена ниже), но не могу понять, как реализовать ее в Ioni c. Я все еще очень новичок в Ioni c и кодировании в целом, поэтому я буду очень благодарен за любую форму помощи или объяснения!

Документация по смешанным типам диаграмм: https://www.chartjs.org/docs/latest/charts/mixed.html

Примечание: у меня есть другие функции, не показанные выше для фильтрации и поиска, функция getData () отлично работает для любого простого типа диаграммы, но я не могу заставить работать смешанный тип диаграммы.

...