Question

我正在使用图表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
                            }
                        }]
                    }
                }
            });

带有折线图和条形图的Chart.js-尽管显示了最大值，但未呈现条形图

1 个答案: