Обрезка диаграммы Chart.js

Ответ 1

Это неправильное обрезание было поднято как проблема № 622 в репозитории Github для ChartJS.

Это было определено как ошибка (очевидно, эта ошибка еще не исправлена)

https://github.com/nnnick/Chart.js/issues/622

В ответ на эту проблему у Роберта Турралла есть решение, которое, по его словам, является хорошим обходным решением. Вот его предлагаемое исправление:

Я уверен, что это связано с тем, что всплывающие подсказки генерируются в пределах холста, что затрудняет фиксацию.

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

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
  tooltipFontSize: 10,
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
  percentageInnerCutout : 70
});

Проверьте образцы /pie -customTooltips.html для пользовательского кода всплывающей подсказки. Скопируйте/вставьте, и он сразу сработает. Очень счастлив!

Всплывающая подсказка отображается вне границ холста:

PS: тоже пример строки, который, как я предполагаю, будет работать отлично с гистограммами.

Ответ 2

Я нашел обходное решение для этого. У меня есть пустые метки на оси x, поэтому я просто добавил ярлык с несколькими пробелами в нем для последней записи метки. Это заставило ChartJS оставить достаточно места для ярлыка, чтобы он соответствовал, что также оставляет достаточно места для подгонки подсказки.

Кроме того, у меня есть большие круги для моих точек данных, а последний справа справа обрезается. Добавление дополнительного места на ярлык также фиксировало это.

Вот код, где я создаю свои метки. ratings - это мои фактические данные, определенные ранее:

// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
  labels.push("");
}
labels[ratings.length-1] = "       ";

var data = {
  labels: labels,
  datasets: [
      {
          label: "Progress",
          strokeColor: "rgba(255,165,0,1.0)",
          pointColor: "white",
          pointStrokeColor: "rgba(255,165,0,1.0)",
          pointHighlightStroke: "#B87700",
          data: ratings
      }
  ]
};

Даже если у вас есть фактические метки на вашем графике, вы можете добавить пробелы на свой последний ярлык, чтобы сделать его больше. Если вы центрируете свой ярлык, вы можете добавить такое же количество пространства до и после.

Очевидно, будут ограничения, в которых это будет или не будет работать для вас, но для моего случая я добавил 7 пробелов, и теперь все выглядит хорошо.

Кроме того, у моего дела была проблема с правой стороны, тогда как этот вопрос имеет проблему с левой стороной. Это же исправление должно работать, но помещение на первую метку.

Ответ 3

В моем случае я смог обойти эту проблему, уменьшив количество текста в подсказке. Я сделал это с помощью пользовательских обратных вызовов tooltip, чтобы указать текст ярлыка. Моя инициализация выглядела так:

var chart = new Chart(canvas.getContext("2d"), {
    type: 'line',
    data: chartData,
    options: {
        responsive: true,
        tooltips: {
            callbacks: {
                title: function(tooltipItems, data) {
                    return tooltipItems[0].xLabel;
                },
                label: function(tooltipItems, data) {
                    return tooltipItems.yLabel;
                },
            }
        },
    },
});

Появляется доступное исправление, которое еще не было объединено с проектом: https://github.com/chartjs/Chart.js/pull/1064

Ответ 4

Кажется, что Chart.js не может определить, в каком направлении отображать всплывающую подсказку, потому что он не может определить размер элемента подсказки, когда он растягивает холст за пределами.

В моем сценарии я исправил его, сжимая текст внутри этой конкретной подсказки ближе к этим опциям для объекта опций всплывающей подсказки:

        tooltips.titleMarginBottom = 1;
        tooltips.bodySpacing = 1;
        tooltips.yPadding = 2;

Довольно легко Chart.js затем правильно решает показать подсказку слева от мыши, а не ниже. Было бы здорово, если бы вы могли выбрать, в каком направлении появляется всплывающая подсказка по сравнению с мышью.

Ответ 5

Вы можете добавить внутреннее дополнение к диаграмме. Например, в моем случае у меня был разрез подсказок справа.

                    options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutoutPercentage: 60,
                    legend: {
                        display: false
                    },
                    animation: {
                        animateRotate: false
                    },
                    layout: {
                        padding: {
                            right: 40
                        }
                    }
                }

Ответ 6

Интересно, что настройка tooltipCaretSize на 0 решает проблему.
{ tooltipCaretSize: 0, ... }