包含折线图和条形图的Chart.js -虽然显示了条形图的最大值，但未呈现条形图

Question

我正在使用chart js (https://www.chartjs.org/)，我有一个折线图，我想将条形图作为第二个数据集添加到其中。问题是折线图显示了，但条形图没有显示，但显示了条形图数据集的最大值。我的意思是，折线图的最大值是1，条形图的最大值是2，图表显示的值是2。

如果删除折线图数据集，则会成功绘制条形图，但将它们放在一起时，只会显示折线图。它会将标签添加到图例中，尽管它只是不显示该条。

下面是我的图表对象

activeUserChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: result.data.chart_labels,
                    datasets: [{
                        label: 'Total Daily Active Users',
                        data: result.data.chart_data.active_user_data,
                        backgroundColor: [
                            'rgba(209, 0, 21, 0.2)'
                        ],
                        borderColor: [
                            'rgba(209, 0, 21,1)'
                        ],
                        borderWidth: 1
                    },
                    {
                        type: 'bar',
                        label: 'App Analysis',
                        data: result.data.chart_data.app_release_data,
                        backgroundColor: 'rgba(255, 255, 255, 1)',
                        borderColor: 'rgba(255, 255, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true,
                                //stepSize: 1,
                                autoSkip: true
                            }
                        }]
                    }
                }
            });

我的javascript对象不能在图表上呈现条形图，这是怎么回事？

Answer 1

我想，出于某种原因，我不得不将主类型替换为bar，然后将数据集中的类型覆盖为line，如下所示：

activeUserChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: result.data.chart_labels,
                    datasets: [
                        {
                        type: "line",
                        label: 'Total Daily Active Users',
                        data: result.data.chart_data.active_user_data,
                        backgroundColor: [
                            'rgba(209, 0, 21, 0.2)'
                        ],
                        borderColor: [
                            'rgba(209, 0, 21,1)'
                        ],
                        borderWidth: 1
                    },
                        {
                            label: 'App Analysis',
                            data: result.data.chart_data.app_release_data,
                            backgroundColor: 'rgba(255, 255, 255, 1)',
                            borderColor: 'rgba(255, 255, 255, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true,
                                //stepSize: 1,
                                autoSkip: true
                            }
                        }]
                    }
                }
            });