Гистограмма Chart.js не центрируется, когда есть только 1 элемент - PullRequest
0 голосов
/ 12 июня 2018

Если на гистограмме есть только один элемент, полоса не отцентрирована:

https://codepen.io/anon/pen/rKmrpX?editors=1010

HTML:

<canvas id="myChart" width="400" height="400"></canvas>

JS:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        "labels": ["2018-06-01T04:00:00.000Z"],
        "datasets": [{
            "type": "bar",
            "label": "Earnings",
            "yAxisID": "left-y-axis",
            "borderColor": "rgba(107, 165, 57, 1)",
            "backgroundColor": "rgba(107, 165, 57, 0.4)",
            "data": [25.77]
        }, {
            "type": "line",
            "label": "Pageviews",
            "yAxisID": "right-y-axis",
            "backgroundColor": "rgba(70, 152, 203, 0.4)",
            "borderColor": "rgba(70, 152, 203, 1)",
            "pointBackgroundColor": "rgba(70, 152, 203, 1)",
            "pointRadius": 0,
            "data": [3426]
        }]
    },
    options: {
        "scales": {
            "xAxes": [{
                "maxBarThickness": 100,
                "type": "time",
                "offset": true,
                "time": {
                    "unit": "day",
                    "tooltipFormat": "MMM-D",
                    "displayFormats": {
                        "day": "MMM-D",
                        "month": "MMM"
                    }
                },
                "ticks": {
                    "maxRotation": 0,
                    "maxTicksLimit": 7,
                    "autoSkip": true
                },
                "gridLines": {
                    "display": false,
                    "offsetGridLines": true
                }
            }],
            "yAxes": [{
                "id": "left-y-axis",
                "type": "linear",
                "position": "left",
                "ticks": {
                    "beginAtZero": true
                },
                "scaleLabel": {
                    "display": true,
                    "labelString": "Earnings"
                }
            }, {
                "id": "right-y-axis",
                "type": "linear",
                "position": "right",
                "ticks": {
                    "beginAtZero": true
                },
                "gridLines": false,
                "scaleLabel": {
                    "display": true,
                    "labelString": "Pageviews"
                }
            }]
        },
        "tooltips": {
            "callbacks": {}
        }
    }
});

Есть ли исправление для этого?Возможно, мне не хватает опции, которую следует передать?

Здесь используется последняя версия Chart.js (2.7.2).

1 Ответ

0 голосов
/ 12 июня 2018

Удаление большинства конфигурационных швов xAxes для получения результата, который вы ищете

https://codepen.io/tryggvigy/pen/rKmQpX?editors=1010

    "scales": {
        "xAxes": [{
            "maxBarThickness": 100,
        }],
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...