在chartjs中的组合图中，折线图显示在柱状图下方

Question

我正在使用chart.js在我的网站上创建组合图表。

我面临的问题是当线条与柱状图相遇时，线条消失了。我认为这是因为线条图表显示在柱状图下面。

以下是我使用的代码：

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，链接在此：https://jsfiddle.net/o7wL0j6d/4/。

任何帮助都将不胜感激。

- Shahzad Ahamad

---

你好，也许问题出在你的数据上，因为正如你在这里所看到的，线条是超过了柱状图的。我在图片中看到你的x轴有“时间”数据槽，所以也许你的线条是从一天的最后开始的，因此没有超过柱状图？我们需要一些数据来看图表是如何绘制的... - Margon

@Margon，我已经更新了问题并添加了一些虚拟数据，请检查。 - Shahzad Ahamad

我查看了你的fiddle，所以你可以对这个行为进行两个修复。第一个：如您在此处所见，他们将线数据集作为第一个制作图表，因此它位于条形图“上方”。第二个：您可以在颜色条中使用不透明度，例如“#FF0000CC”，这样您就可以在条形图下方看到。 - Margon

Answer 1

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

- Thirukumaran

---

回答中只包含其他链接的答案真的是“好答案”吗？ - catcon

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

这对我有用，谢谢。

- Shahzad Ahamad

---

我正打算输入那个答案 :) 加1赞成你自己找到解决方案并在这里发布以帮助其他人。 - timclutton

Answer 3

我们可以使用顺序来解决这个问题 例如：

    label: 'Schedule',
    data: [...lineData],
    borderColor: '#9630D6',
    backgroundColor: '#fff',
    type: 'line',
    order: 0,
  },
  {
    label: 'bar 1st',
    data: [...barData1],
    backgroundColor: '#97CEA5',
    barThickness: 40,
    order: 1,
  },
  {
    label: 'bar 2nd',
    data: [...barData2],
    backgroundColor: '#E2BB72',
    barThickness: 40,
    order: 2,
  },

  {
    label: 'bar 3rd',
    data: [...barData3],
    backgroundColor: '#E2E28F',
    barThickness: 40,
    order: 3,
  }

- vipin