#javascript #chart.js
#javascript #chart.js
Вопрос:
Я использую Chart.js Версия: 2.7.3
Заголовок моей диаграммы состоит из трех строк. Я хотел бы сделать размер шрифта верхней строки 16, затем второй 14 и третий 12. Я не уверен, возможно ли это, и не нашел способа.
Вот часть моего кода, которая определяет параметры для моей диаграммы…
options: {
title: {
display: true,
// Supply the title as an array and each array index prints on a separate line in the title section
text: ['My Chart','Last Month', 'Local Time'],
fontSize: 16,
callbacks: {
drawTitle: function(pt, vm, ctx, opacity) {
console.log("title.length: " title.length);
var title = vm.title;
if (title.length) {
ctx.textAlign = vm._titleAlign;
ctx.textBaseline = 'top';
var titleFontSize = vm.titleFontSize;
var titleSpacing = vm.titleSpacing;
ctx.fillStyle = mergeOpacity(vm.titleFontColor, opacity);
ctx.font = helpers.fontString(titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
var i, len;
for (i = 0, len = title.length; i < len; i) {
ctx.fillText(title[i], pt.x, pt.y);
pt.y = titleFontSize titleSpacing; // Line Height and spacing
if (i 1 === title.length) {
pt.y = vm.titleMarginBottom - titleSpacing; // If Last, add margin, remove spacing
}
}
}
}
}
},
Я знаю, что вы можете указать «Размер шрифта», но это относится ко всему тексту в заголовке диаграммы. Мне нужен другой размер шрифта для каждой строки текста. Я попытался указать обратный вызов, но я не вижу сообщения console.log() при проверке в Chrome F12 devtools.
Есть ли способ Chart.js чтобы указать другой размер шрифта для каждой строки в заголовке диаграммы?
Спасибо!
Обновление о решении
Я принял ответ от Эди Карлоса, потому что он дал полезный совет о том, как прикрепить форматированный текст к элементу canvas и что это можно сделать в Chart.js анимация обратного вызова.
Моя диаграмма представляет собой точечную диаграмму с включенными всплывающими подсказками. В принятом решении при наведении курсора мыши на точку на графике заполняемый текст может исчезнуть или изменить положение на экране. Я обнаружил, что текст также исчезнет, если я использую F12 Chrome Dev Tools. То же самое происходит в jsfiddle в принятом ответе… если вы включите всплывающие подсказки… попробуйте навести курсор мыши на столбчатую диаграмму или нажать клавишу F12.
Чтобы остановить изменение положения заполняемого текста при наведении курсора мыши на всплывающую подсказку, я обнаружил, что мне нужно указать:
ctx.textBaseline = 'top';
ctx.textAlign = 'center';
Чтобы остановить исчезновение fillText при нажатии F12, я обнаружил, что мне пришлось стилизовать CSS элемент canvas с абсолютной позицией.
#canvas{
position:absolute;
}
Here is a section of the code in my Chart.js options that shows how to specify a different font size and style for each row of text you may have in a Chart.js Chart Title:
options: {
animation: {
onProgress: function(animation) {
ctx.textBaseline = 'top';
ctx.textAlign = 'center';
// Set the font size and text position for the 2nd row in the Chart title
ctx.font = "bold 14px 'Helvetica Neue', Helvetica, Arial, sans-serif";
ctx.fillStyle = "#666";
ctx.fillText("Last 24 Hours", 610, 32);
// Set the font size and text position for the 3rd row in the Chart title
ctx.font = "bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif";
ctx.fillStyle = "#666";
ctx.fillText("Local Time | Limit=None", 610, 53);
}
},
title: {
display: true,
text: ['Sensor Chart',' ', ' '],
fontSize: 16
}
}
Chart.js позволяет указать массив строк в качестве заголовка. Затем каждый индекс массива выводится в отдельной строке. Я оставил пробелы в тексте: [] индекс массива 1 и 2, чтобы в заголовке диаграммы было пустое место для размещения ctx.fillText() .
Предлагаемое дополнение к Chart.js
В целом это все еще кажется немного хакерским способом сделать это. Я думаю Chart.js должно быть более комплексное решение. Что-то вроде того, как таким же образом вы можете указать более одной оси y, каждая со своими свойствами, используя:
yAxes: [
{
id: 'A',
..
..
},
{
id: 'B',
..
..
}
]
Было бы здорово, если бы вы могли указать стиль для нескольких строк в заголовке диаграммы с помощью чего-то вроде:
title: {
display: true,
titleRows: [
{
id: 'A',
text: 'Row1',
fontSize: 16,
..
},
{
id: 'B',
text: 'Row2',
fontSize: 14,
..
},
{
id: 'C',
text: 'Row3',
fontSize: 12,
..
}
]
}
Ответ №1:
Вы можете использовать метод fillText(), используя Chart.js Версия: 2.7.3
Напишите «Network!» и «Stackoverflow» (с градиентом) на холсте, используя fillText():
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("Network", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0"," magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Stackoverflow", 10, 90);
Метод fillText() рисует заполненный текст на холсте. Цвет текста по умолчанию — черный.
Используйте свойство font, чтобы указать шрифт и размер шрифта, и используйте свойство fillStyle для отображения текста в другом цвете / градиенте.
Мой пример скрипки
-> Обновить Для этого можно использовать обратные вызовы анимации (onProgress или onComplete), например:
options: {
animation: {
onProgress: function(animation) {
// code above
}
}
}
Обновление 2 -> Полный код
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
data: [2, 2, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
enabled: false
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
animation: {
onProgress: function(animation) {
var c = document.getElementById("myChart");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("1 - Network", 45, 30);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("2 - Stackoverflow", 45, 70);
}
}
}
});
полная скрипка
Надеюсь, это поможет!
Комментарии:
1. Спасибо вам за это. Ну, это не отвечает на мой вопрос, но это полезно. Однако у меня это не работает. Я могу расположить свой текст на холсте диаграммы и придать своему тексту цвет с помощью fillText и fillStyle, однако ctx.font не имеет никакого эффекта. Например: ctx.font = «bold 26px»; ничего не делает. На самом деле размер шрифта принимает размер, указанный в Chart.js опция … заголовок{Размер шрифта: 16}. Вы можете помочь? Если нет, возможно, я просто использую CSS и расположу интервал в области заголовка!
2. Вы можете использовать обратные вызовы анимации (onProgress или onComplete). Я обновляю свой ответ, и вы можете использовать свой код и тестировать! Измените тип обратного вызова! В моем ответе размер шрифта работает для нескольких строк! И вы можете добавить поля и отступы к местоположению метки
3. Спасибо за вашу помощь, Edi. Я принял ваше решение и обновил свой вопрос, показав, как я использовал вашу информацию для решения своей проблемы.
Ответ №2:
Используйте опцию субтитров ChartJS:
var ctx = document.getElementById('chart').getContext('2d');
var cfg = {
type: 'bar',
data: {
labels: [1,2,3,4,5],
datasets: [{label:'Frequency',data:[36,23,72,43,27]}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart Title',
padding: {
top: 10,
bottom: 5
},
font: {
size: 16
}
},
subtitle: {
display: true,
text: 'Chart Subtitle',
padding: {
top: 0,
bottom: 30
},
font: {
size: 10,
weight: 'bold'
}
}
}
}
};
var chart = new Chart(ctx, cfg); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>