使用chart.js组合条形图和折线图

Question

我必须绘制一个组合的条形图和折线图，其中，条形图的左y轴（PDF）和x轴绘制，折线图的右Y轴（CDF）和x轴绘制。 输出仅显示折线图，但不显示条形图。当我尝试分别显示两个图表时，两者都很好，但我想将它们显示为一个。 下面是我的代码。

Component.ts

public xaxislabel:any[] = [0,5,10,15,20,25,30,35,40]

public ChartOptions:any = {

    scales: {
        xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'KPI Range'
            },
            gridLines: {
                display: false
            }
          }],
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'PDF'
              },
              gridLines: {
                display: false
            },
          id: 'A',
          type: 'linear',
          position: 'left',
          ticks: {
            max: 1,
            min: 0
          }
        }, {
            scaleLabel: {
                display: true,
                labelString: 'CDF'
              },
              gridLines: {
                display: false
            },
          id: 'B',
          type: 'linear',
          position: 'right',
          ticks: {
            max: 1,
            min: 0
          }
        }]
      },
      scaleShowVerticalLines: true,
    responsive: true
  };



public ChartData:any[] =[{

    label: "",
   type: "bar",
   data:  [0,0.05,0.1,0.05,0.3,0.3,0.1,0.05,0.05]
  },
  {
   label: "",
   type: "line",
   fill: false,
   data: [0,0.05,0.15,0.2,0.5,0.8,0.9,0.95,1.0]
    }
  ]

component.html

<div id="demo">
    <canvas id ="rnachart"  baseChart
             [datasets]="ChartData"
             [labels]="xaxislabel"
             [options]="ChartOptions"     
</div>

请帮助我