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

【问题标题】：Line chart is showing under bar in combochart in chartjs折线图显示在 chartjs 组合图中的条形下方
【发布时间】：2019-02-05 01:36:13
【问题描述】：

我在我的网站中使用了使用 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();

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

我为同一个here创建了一个jsfiddle

任何帮助都将不胜感激。

【问题讨论】：

您好，问题可能出在您的数据中，因为您可以看到here 这条线超出了栏。我在图像中看到，在您的 x 轴上，您有“时间”数据槽，所以也许您的线路从一天结束时开始，并且没有超过这个标准？我们需要一些数据来查看图表是如何绘制的……
@Margon 我已经更新了问题并添加了一些虚拟数据，请检查
我检查了你的小提琴，所以你可以对这个行为做两个修复第一个：as you can see here，他们用线数据集作为第一个图表，所以它“高于”条形第二个：你可以在你的彩条中使用不透明度：比如“#FF0000CC”，所以你可以在彩条下看到

标签： javascript charts chart.js bar-chart

【解决方案1】：

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

【讨论】：

Are answers that just contain links elsewhere really “good answers”?

【解决方案2】：

我自己找到了解决方案。

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

它对我有用，谢谢

【讨论】：

我刚刚输入了那个答案 :) +1 用于自己找到解决方案并将其发回此处以帮助他人。