图表 JS 堆叠条形之间的距离答案

【问题标题】：Chart JS distance between bar stacked图表 JS 堆叠条形之间的距离
【发布时间】：2018-12-07 08:15:49
【问题描述】：

我在图表 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>

【问题讨论】：

对我来说看起来不错。 “没有显示正确的数据和数据集之间的距离”是什么意思？
无法正确读取数据标签，你能看到红色、蓝色和绿色之间的距离在 1 月、2 月等...

标签： javascript jquery jquery-ui chart.js chartjs-2.6.0

【解决方案1】：

尝试将 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>

【讨论】：