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();

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

我为相同的here创建了一个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

折线图显示在chart.js中的combochart的条形下方

2 个答案: