Блог

Главная - Вопросы по программированию - Chart.js Гистограмма: Как убрать пробел между столбцами в версии v2.3?

Chart.js Гистограмма: Как убрать пробел между столбцами в версии v2.3?

#javascript #chart.js

#javascript #chart.js

Вопрос:

Я пытаюсь удалить пробел между столбцами моей гистограммы, но, хотя я вижу это решение во многих местах, оно не работает для меня. Это также не упоминается в Chart.js docs так что это странно. Может кто-нибудь сказать мне, как это указать?

 var options = {
    barValueSpacing : 1,        // doesn't work; find another way
    barDatasetSpacing : 1,      // doesn't work; find another way

    legend: {
        display: false          // Hides annoying dataset label
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem) {
                return tooltipItem.yLabel;
            }
        }
    }
};

var ctx = document.getElementById("canvasX").getContext("2d");          
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

Ответ №1:

Вам нужно установить barPercentage и categoryPercentage в 1.0 масштабе по оси x. Добавьте это к вашему options объекту:

 var options = {
    ...
    scales: {
        xAxes: [{
            categoryPercentage: 1.0,
            barPercentage: 1.0
        }]
    }
};

См . http://www.chartjs.org/docs/#bar-chart-chart-options

Комментарии:

1. Требуется незначительное исправление: scales должен быть объект, а не массив.

2. Несколько других отметили, что это теперь скрытые ответы, но, похоже, это не работает для горизонтальной гистограммы. В настоящее время я ищу обходной путь и опубликую, если что-нибудь найду.

3. @TopherFangiofor Для меня это действительно сработало для горизонтальной гистограммы (тип: «horizontalBar»,)!!!!!

4. на самом деле сработало то, что в его ответе Хилла были установлены эти значения, но для yAxes.

5. Убедитесь, что у вас не установлено значение толщины набора данных, иначе оно переопределит параметр barPercentage .

Ответ №2:

В версии 3.2.0 установлено barPercentage значение и categoryPercentage до 1.0 в каждом наборе данных:

 var datasets = [
  {
    ...
    barPercentage: 1.0,
    categoryPercentage: 1.0
  }
]

См . https://www.chartjs.org/docs/3.2.0/charts/bar.html для получения более подробной информации

Ответ №3:

Оба barpercentage и categorypercentage являются собственностью dataset option в chart.js . Вы можете увидеть их в списке здесь и их значение по умолчанию.

     const labels = ["AA","BB", "CC", "DD", "EE", "FF"];
    const data = {
        labels: labels,
        datasets: [{
            categoryPercentage: 0.8, // notice here 
            barPercentage: 0.8,  // notice here 

            label: 'Male',
            data: [-189, -97, -2076, -691, -7887, -3687],
            //...
        }]
    };

Однако, согласно документу конфигурации,

Параметры набора данных можно изменять на нескольких разных уровнях.

Точно так же, как в примере ниже. опция может использоваться на уровне глобальной конфигурации.

 
    const config = {
        type: 'bar',
        data: data,
        options: {

            categoryPercentage: 1.0, // here 
            barPercentage: 0.98,  // here

            maintainAspectRatio: false,
            indexAxis: 'y',
            scales: {
                y: {
                    beginAtZero: true,
                    stacked: true
                },
            }
        },
    };

Если вас интересует, как взаимодействуют два свойства, пожалуйста, ознакомьтесь с подробностями здесь.