Javascript 折线图显示在chartjs中combochart的条形图下

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

我面临的问题是，当线遇到横杆时，它就消失了。我想这是因为条形图下面是折线图。

PFB我使用的代码

var PCTCtx=document.getElementById（“pctdiv”）.getContext（“2d”）

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

我已经为同样的问题创建了一个JSFIDLE

---

任何帮助都是值得的。

我自己找到了解决办法

实际上，我们需要将行数据放在数据集中条形数据的上方。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';

---

这对我很有效谢谢你我也面临同样的问题。我在数据集中找到了一个选项“order”

您好，也许问题出在您的数据中，因为正如您所看到的，这条线在横条上。我在图片中看到，在你的x轴上有“时间”数据槽，所以也许你的线在一天结束的时候就开始了，而它并没有超出这个范围？我们需要一些数据来查看图表是如何绘制的…@Margon我已经更新了问题并添加了一些虚拟数据，请检查我检查了你的小提琴，所以你可以对这种行为做2个修复第一个：，他们制作图表时，线数据集是第一个，所以它“在”条上第二个：你可以在颜色条中使用不透明度：比如“#FF0000CC”，所以你可以看到，在barsI的下面，你只是键入了答案：）+1，用于自己找到解决方案，并将其发回这里以帮助他人。

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';