Линейный график отображается под полосой в комбо-чарте в chartjs - PullRequest
Новая
       31

Линейный график отображается под полосой в комбо-чарте в chartjs

0 голосов
/ 30 августа 2018

Я использую комбинированную диаграмму с помощью chart.js на моем веб-сайте.

Проблема, с которой я сталкиваюсь, заключается в том, что линия исчезает, когда она встречает планку. Я думаю, что это потому, что линейный график показан ниже гистограммы. enter image description here

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 для того же здесь

Любая помощь будет полезна.

1 Ответ

0 голосов
/ 30 августа 2018

Я нашел решение сам.

На самом деле нам нужно поместить данные строки над данными столбца в наборе данных. файл 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';

и это сработало для меня, спасибо

...