折线图显示在chartjs的组合图中的条形下方

Question

我在我的网站上使用 chart.js 使用组合图。

我面临的问题是当它遇到酒吧时线条消失了。我认为这是因为折线图显示在条形图下方。

PFB 我使用的代码。

var PCTCtx = document.getElementById("pctdiv").getContext("2d");

    PCTChart = new Chart(PCTCtx, {
        type: 'bar',
        data: {
            datasets: [{
                label: 'Bar Dataset',
                data: [100, 70, 60, 40],
                backgroundColor: ['red', 'red', 'red', 'red']
            }, {
                label: 'Line Dataset',
                data: [50, 50, 50, 50],
                fill: false,
                backgroundColor: ['#000000', '#000000', '#000000', '#000000'],
                // Changes this dataset to become a line
                type: 'line'
            }],
            labels: ['January', 'February', 'March', 'April']
        },
        options:  {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            },
                            gridLines: {
                                display: false
                            }
                        }],
                        xAxes: [{
                            barThickness: 35,
                            gridLines: {
                                display: false
                            }
                        }]
                    }
                }
    });
    PCTChart.data.datasets[1].borderColor = '#000000';
    PCTChart.update();

我需要在条形图上显示这条线。

我在这里创建了一个 jsfiddle

任何帮助将是可观的。

Answer 1

我自己找到了解决方案。

实际上，我们需要将线数据放在数据集中的条形数据之上。chart.js 按照它在数据集中找到图表数据的顺序从上到下创建图表。

所以我把代码改成了下面

var PCTCtx = document.getElementById("pctdiv").getContext("2d");

    PCTChart = new Chart(PCTCtx, {
        type: 'bar',
        data: {
            datasets: [{
                label: 'Line Dataset',
                data: [50, 50, 50, 50],
                fill: false,
                backgroundColor: ['#000000', '#000000', '#000000', '#000000'],
                // Changes this dataset to become a line
                type: 'line'
            },{
                label: 'Bar Dataset',
                data: [100, 70, 60, 40],
                backgroundColor: ['red', 'red', 'red', 'red']
            }],
            labels: ['January', 'February', 'March', 'April']
        },
        options:  {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            },
                            gridLines: {
                                display: false
                            }
                        }],
                        xAxes: [{
                            barThickness: 35,
                            gridLines: {
                                display: false
                            }
                        }]
                    }
                }
    });
    PCTChart.data.datasets[1].borderColor = '#000000';

它对我有用，谢谢

Answer 2

我面临着同样的问题。我在数据集中找到了一个选项“order”。https://www.chartjs.org/docs/latest/charts/mixed.html