Как я могу получить два составных графика. js графиков для разных типов? - PullRequest
Новая
       19

Как я могу получить два составных графика. js графиков для разных типов?

0 голосов
/ 23 апреля 2020

У меня есть диаграммы. js диаграммы, которые сложены и должны быть на одной оси x. Как я могу получить верхнюю диаграмму, а нижнюю - линейную диаграмму? Я не уверен в другом способе объявить «тип», кроме как наверху, где он влияет на все графики.

Вот пример стека в строках, которые я строю https://stackblitz.com/edit/angular-chartjs-multiple-charts?file=src%2Fapp%2Fapp.component.ts

Большое спасибо!

1 Ответ

0 голосов
/ 23 апреля 2020

У вас есть две отдельные диаграммы, поэтому вы должны определить отдельные Chart.ChartConfiguration для каждой. При условии, что Chart.ChartOptions одинаковы для обеих диаграмм, это может выглядеть следующим образом: 

const chartOptions: Chart.ChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  legend: { display: false },
  scales: {
    xAxes: [{ display: false }],
    yAxes: [{ display: false }],
  }
}

const chartConfigs: Chart.ChartConfiguration[] = [{
    type: 'bar',
    options: chartOptions
  },{
    type: 'line',
    options: chartOptions
}];

А внутри ngAfterViewInit вы используете chartConfigs[index], чтобы выбрать соответствующую конфигурацию диаграммы. 

ngAfterViewInit() {
  this.charts = this.chartElementRefs.map((chartElementRef, index) => {
    const config = Object.assign({}, chartConfigs[index], { data: this.chartData[index] });      
    return new Chart(chartElementRef.nativeElement, config);
  });
}

Пожалуйста, ознакомьтесь с исправленным StackBlitz

...