如何让两个堆叠的chart.js图表成为不同类型？

Question

我必须将图表.js图表堆叠起来，并且应该在同一个x轴上。如何让上面的是条形图，而下面的是线形图？我不知道除了在顶部声明 "类型 "之外，还有什么其他的方法来声明 "类型"，因为它会影响所有的图表。

下面是一个我正在构建的图表的stackbitz例子。https:/stackblitz.comeditangular-chartjs-multiple-charts?file=src%2Fapp%2Fapp.component.ts。

非常感谢！我有图表.js图表，是堆栈式的。

Answer 1

你有两个单独的图表，因此你应该定义一个不同的 "柱状图"。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