Диаграмма JS расстояние между планками сложены - PullRequest
Новая
       12

Диаграмма JS расстояние между планками сложены

0 голосов
/ 07 декабря 2018

Я создал столбчатый график на диаграмме JS для ведения всех смен по месяцам Регулярные сдвиги, Ежегодный отпуск, Больные и т. Д., Который работает нормально.

Теперь, когда вы видите, что изображение не показывает правильные данные и расстояние между наборами данных, может кто-нибудь помочь мне исправить это?Проверьте мой код сценария Java.

<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", 'Aug']
var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July", 'Aug'],
       datasets: [{label: 'Reg',backgroundColor: window.chartColors.red,data: [4914, 4515, 5064, 4873, 5146, 5045, 5192, 5349]},
                  { label: 'AL',    backgroundColor: window.chartColors.blue,data: [0, 151, 122, 242, 99, 213, 295, 877]},
                  { label: 'SICK',backgroundColor: window.chartColors.green,data: [36, 0, 0, 0, 6, 0, 0, 0]}
        ]
};
window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            title: {    display: true,text: "Chart.js Bar Chart - Stacked"},
               tooltips: {  mode: 'index',  intersect: false},
               responsive: true,
               scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true,    type: 'linear',position: 'left'}]
            }
        }
    });
};
document.getElementById('randomizeData').addEventListener('click', function() {
    barChartData.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(function() {    return randomScalingFactor();});
    });
    window.myBar.update();
});
// Define a plugin to provide data labels
Chart.plugins.register({
    afterDatasetsDraw: function(chartInstance, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chartInstance.chart.ctx;
        chartInstance.data.datasets.forEach(function(dataset, i) {
            var meta = chartInstance.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function(element, index) {
                    // Draw the text in black, with the specified font
                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();
                    // Make sure alignment settings are correct
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});
</script>

enter image description here

1 Ответ

0 голосов
/ 04 апреля 2019

Попробуйте изменить размер шага по оси Y на 100 или что-то подходящее .. как это 

<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", 'Aug']
var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July", 'Aug'],
       datasets: [{label: 'Reg',backgroundColor: window.chartColors.red,data: [4914, 4515, 5064, 4873, 5146, 5045, 5192, 5349]},
                  { label: 'AL',    backgroundColor: window.chartColors.blue,data: [0, 151, 122, 242, 99, 213, 295, 877]},
                  { label: 'SICK',backgroundColor: window.chartColors.green,data: [36, 0, 0, 0, 6, 0, 0, 0]}
        ]
};
window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            title: {    display: true,text: "Chart.js Bar Chart - Stacked"},
               tooltips: {  mode: 'index',  intersect: false},
               responsive: true,
               scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true,    type: 'linear',position: 'left', ticks: { beginAtZero:true, stepSize: 10 }}]
            }
        }
    });
};
document.getElementById('randomizeData').addEventListener('click', function() {
    barChartData.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(function() {    return randomScalingFactor();});
    });
    window.myBar.update();
});
// Define a plugin to provide data labels
Chart.plugins.register({
    afterDatasetsDraw: function(chartInstance, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chartInstance.chart.ctx;
        chartInstance.data.datasets.forEach(function(dataset, i) {
            var meta = chartInstance.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function(element, index) {
                    // Draw the text in black, with the specified font
                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();
                    // Make sure alignment settings are correct
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});
</script>
...