Добавить суффикс к набору данных Chart.js?
Я использую Chart.js для отображения данных на своем сайте и хотел бы добавить суффикс к полям данных, чтобы указать, что они в граммах (г). Я не могу найти в документации ничего, что могло бы помочь, но это кажется довольно простой функцией.
Например, я хотел бы, чтобы данные отображались как 32 г, 38 г, 53 г, а не просто 32, 38, 53. Вы не можете просто добавить их в массив, поскольку это требуется в виде чисел только для создания диаграммы.
PHP
$myChart = array(
"type" => "doughnut",
"data" => array(
"labels" => ['Label1', 'Label2', 'Label3'],
"datasets" => [
array(
"data" => [ 32, 38, 53 ],
)
]
)
);
HTML
<div class = "chart" data-charts = "{"type":"doughnut","data":{"labels":["Label1","Label2","Label3"],"datasets":[{"data":["56","31","21"],}]}}">
<div class = "chart-container">
<canvas class = "chartjs-render-monitor">
</canvas>
</div>
</div>
JQUERY
// Chart init
window.onload = function() {
// Find all charts
var containers = document.querySelectorAll('.chart');
// For each chart
containers.forEach(function(container) {
// Parse data
var charts = JSON.parse(container.dataset.charts);
// Add container div
var div = document.createElement('div');
div.classList.add('chart-container');
// Add canvas for chart to be drawn in
var canvas = document.createElement('canvas');
// Append new elements
div.appendChild(canvas);
container.appendChild(div);
// Config
var ctx = canvas.getContext('2d');
var config = charts;
// Init chart
var myChart = new Chart(ctx, config);
});
};
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Чтобы это работало, вы можете использовать обратный вызов конфигурации всплывающих подсказок, чтобы добавить строку к значению в наборе данных, примерно так:
var containers = document.querySelectorAll('.chart');
containers.forEach(function(container) {
var charts = JSON.parse(container.dataset.charts);
var div = document.createElement('div');
div.classList.add('chart-container');
var canvas = document.createElement('canvas');
div.appendChild(canvas);
container.appendChild(div);
var ctx = canvas.getContext('2d');
var config = charts;
var myChart = new Chart(ctx, $.extend(config, {
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return data.datasets[0].data[tooltipItems.index] + 'g';
}
}
}
}
}));
});canvas {
background-color: #eee;
}<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/2.8.0/Chart.bundle.min.js"></script>
<div class = "chart" data-charts='{"type":"doughnut","data":{"labels":["Label1","Label2","Label3"],"datasets":[{"data":["56","31","21"]}]}}'></div>Трудно решить проблему, не видя ее. Я сделал предположение о том, как выглядит ваша структура данных JS, на основе массива PHP, который вы разместили в вопросе. Если бы вы могли отредактировать вопрос, включив в него фактический JS, я мог бы отредактировать ответ для вас.
Конечно, извините, я должен был изначально включить полный шебанг. Я обновил вопрос в соответствии с просьбой. Спасибо
Извините, не могли бы вы включить div .chart, когда он отображается в HTML. PHP не имеет отношения к проблеме и делает решение неясным.
Есть пара вопросов. Во-первых, ваши двойные кавычки не совпадают. Вам нужно использовать ' для внешнего HTML-атрибута, иначе он будет мешать " в JSON. Во-вторых, вы не можете поместить функцию в JSON, который вы вставили в атрибут data, как я изначально предлагал. Чтобы обойти это, вы можете использовать $.extend() jQuery, чтобы добавить параметры конфигурации всплывающей подсказки к данным диаграммы перед вызовом конструктора Chart.js. Я обновил ответ для вас.
Привет, Рори. Извините за задержку с ответом, вчера был выходной. Это идеально, и я отметил как решенный, большое спасибо за весь вклад. Единственная последняя мелкая ошибка, которую я вижу, заключается в том, что я получаю ошибку jQuery в var myChart = new Chart(ctx, $.extend(config, {, говоря, что «Диаграмма» не определена. Можно ли это устранить?
Нет проблем, рад помочь. Вы получите эту ошибку, если вы не включили библиотеку диаграмм на страницу или если вы включили ее после, которую вы вызываете new Chart()
Спасибо. chart.js включен перед моим кодом выше, мне также нужно объявить что-то в скрипте выше?
Нет, это должно сработать, как видно из примера в моем ответе. Я бы предложил открыть новый вопрос, который показывает весь HTML и скрипт.
Спасибо, Рори, это выглядит великолепно! Единственная проблема, с которой я сталкиваюсь, заключается в том, что моя структура немного отличается от вашей, и я получаю ошибки JS в финальной функции. Есть ли способ переформатировать, чтобы он соответствовал моей структуре, пожалуйста? Кажется, ошибка находится в разделе функций (tooltipItems, data)?