Динамическое обновление в Apexcharts количества тиков в зависимости от ширины экрана
Я впервые тестирую некоторые библиотеки для создания графиков на JavaScript типа Open Source, чтобы понять, какая из них мне наиболее интересна и подходит.
Я пытался обновить тиковую сумму в Apexcharts на xaxis с помощью type: 'category' (с помощью простого кода функции JavaScript).
В метках присутствуют временные метки в виде строки.
Я не могу использовать type: 'datetime', потому что некоторые точки в датах имеют null (нет примера, полностью заполнено).
Итак, посмотрите этот фрагмент.
Если я изменю размер окна браузера, галочка будет заменена на tickAmount: newtickamount правильно, но я получу совершенно другие значения в xaxis.
Откройте полноразмерный фрагмент, чтобы увидеть результат изменения xaxis (нажав в правом верхнем углу фрагмента).
Это баг или я что-то делаю не так?
var options = {
chart: {
width: '100%',
height: '400px',
stacked: false,
toolbar: { show: false, },
},
labels: [
"29 08 2024 07:04:31", "29 08 2024 07:04:41", "29 08 2024 07:04:51", "29 08 2024 07:05:01", "29 08 2024 07:05:11", "29 08 2024 07:05:21", "29 08 2024 07:05:31", "29 08 2024 07:05:41", "29 08 2024 07:05:51", "29 08 2024 07:06:01", "29 08 2024 07:06:11", "29 08 2024 07:06:21", "29 08 2024 07:06:31", "29 08 2024 07:06:41", "29 08 2024 07:06:51", "29 08 2024 07:07:01", "29 08 2024 07:07:11", "29 08 2024 07:07:21", "29 08 2024 07:07:31", "29 08 2024 07:07:41", "29 08 2024 07:07:51", "29 08 2024 07:08:01", "29 08 2024 07:08:11", "29 08 2024 07:08:21", "29 08 2024 07:08:31", "29 08 2024 07:08:41", "29 08 2024 07:08:51", "29 08 2024 07:09:01", "29 08 2024 07:09:11", "29 08 2024 07:09:21", "29 08 2024 07:09:31", "29 08 2024 07:09:41", "29 08 2024 07:09:51", "29 08 2024 07:10:01", "29 08 2024 07:10:11", "29 08 2024 07:10:21", "29 08 2024 07:10:31", "29 08 2024 07:10:41", "29 08 2024 07:10:51", "29 08 2024 07:11:01", "29 08 2024 07:11:11", "29 08 2024 07:11:21", "29 08 2024 07:11:31", "29 08 2024 07:11:41", "29 08 2024 07:11:51", "29 08 2024 07:12:01", "29 08 2024 07:12:11", "29 08 2024 07:12:21", "29 08 2024 07:12:31", "29 08 2024 07:12:41", "29 08 2024 07:12:51", "29 08 2024 07:13:01", "29 08 2024 07:13:11", "29 08 2024 07:13:21", "29 08 2024 07:13:31", "29 08 2024 07:13:41", "29 08 2024 07:13:51", "29 08 2024 07:14:01", "29 08 2024 07:14:11", "29 08 2024 07:14:21", "29 08 2024 07:14:31", "29 08 2024 07:14:41", "29 08 2024 07:14:51", "29 08 2024 07:15:01", "29 08 2024 07:15:11", "29 08 2024 07:15:21", "29 08 2024 07:15:31", "29 08 2024 07:15:41", "29 08 2024 07:15:51", "29 08 2024 07:16:01", "29 08 2024 07:16:11", "29 08 2024 07:16:21", "29 08 2024 07:16:31", "29 08 2024 07:16:41", "29 08 2024 07:16:51", "29 08 2024 07:17:01", "29 08 2024 07:17:11", "29 08 2024 07:17:21", "29 08 2024 07:17:31", "29 08 2024 07:17:41", "29 08 2024 07:17:51", "29 08 2024 07:18:01", "29 08 2024 07:18:11", "29 08 2024 07:18:21", "29 08 2024 07:18:31", "29 08 2024 07:18:41", "29 08 2024 07:18:51", "29 08 2024 07:19:01", "29 08 2024 07:19:11", "29 08 2024 07:19:21", "29 08 2024 07:19:31", "29 08 2024 07:19:41", "29 08 2024 07:19:51", "29 08 2024 07:20:01", "29 08 2024 07:20:11", "29 08 2024 07:20:21", "29 08 2024 07:20:31", "29 08 2024 07:20:41", "29 08 2024 07:20:51",
],
series: [{
name: 'Hello',
info: 'hello',
type: 'line',
data: [
357, 171, 472, 909, 707, 411, 470, 990, 112, 369, 428, 451, 44, 869, 710, 782, 718, 491, 479, 976, 438, 953, 976, 363, 886, 479, 274, 809, 625, 808, 569, 226, 158, 646, 196, 506, 754, 114, 513, 535, 271, 428, 155, 97, 412, 661, 181, 118, 616, 297, 23, 460, 344, 274, 467, 937, 839, 355, 290, 765, 647, 462, 90, 439, 737, 439, 194, 186, 973, 667, 181, 425, 84, 453, 43, 835, 99, 209, 580, 465, 329, 740, 541, 237, 17, 631, 916, 300, 745, 826, 63, 900, 990, 450, 560, 99, 21, 981, 954,
],
},
],
stroke: {
width: 2,
curve: 'smooth',
},
xaxis: {
type: 'category', //category datetime numeric
//tickAmount: 20,
tooltip: { enabled: false, },
tickPlacement: 'on',
labels: { rotate: -60, },
},
yaxis: [
{
show: true,
labels: {
show: true,
},
axisBorder: { show: false, },
axisTicks: { show: false, },
tooltip: { enabled: true, offsetX: -20, },
},
],
tooltip: {
enabled: true,
shared: true,
intersect: false,
inverseOrder: false,
//custom: function({series, seriesIndex, dataPointIndex, w}) { return 'HELLO!'; }),
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
//Replacing tickamount
function replace_tickamount(){
width = document.body.clientWidth;
newtickamount = 0;
if (width > 1000){
newtickamount = 10;
} else if (width > 500) {
newtickamount = 8;
} else {
newtickamount = 4;
}
chart.updateOptions({
xaxis: { type: 'category', tickAmount: newtickamount, },
});
}
addEventListener("resize", (event) => {
replace_tickamount();
});
<div id = "chart"></div>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
body { font-family: Roboto, sans-serif; }
#chart { max-width: 100%; border: 1px solid #000; }
</style>
<script src = "https://cdn.jsdelivr.net/npm/apexcharts"></script>РЕДАКТИРОВАНИЕ ПОСЛЕ ОТВЕТА @kikon
Кажется, «ошибка» оказалась больше, чем я ожидал.
Если вы используете первое предложенное решение и меняете tickAmount вручную, например
newtickamount = 0;
if (width > 1000){ newtickamount = 7; }
chart.updateOptions({
xaxis: { type: 'category', tickAmount: newtickamount, categories: options.labels, },
});
у вас есть несколько значений tickAmount разных.
Попробуйте изменить и посмотреть.
Для newtickamount = 5 на графике печатается 6 тиков.
Для newtickamount = 7 на графике печатается 9 тиков.
Для newtickamount = 10 на графике печатается 11 тиков.
Что-то не так с внутренним расчетом (о котором я даже и не спрашивал).
Графически мне хотелось бы получить первое и последнее значения, чтобы сделать результат визуально красивее (с помощью небольшой функции, использующей chart.w.globals.categoryLabels.length).
Но в этих условиях менять сумму тика кажется бесполезным.
Эта проблема уже обнаружена, смотрите этот пост. Альтернативное решение можно представить, если вы хотите установить точное количество меток галочек, возможно, с включенными первой и последней галочками, но, опять же, это совсем другая проблема.
@kikon Да, это то, что я ищу. Вычисляет галочки из внешней записанной функции, чтобы иметь первое и последнее значение. Извините, но на этот раз я не согласен. Сообщение, на которое вы ссылаетесь, дает решение для ярлыков в числовой категории. Таким образом, тики рассчитываются по числам. А также не говорит о проблеме неправильного количества тиков, когда я устанавливаю его вручную. Я думаю, что apexchart еще многое предстоит оптимизировать в своей библиотеке. Я думаю, что это оптимизировано для числа, и они также должны работать при вводе текста на метке. Спасибо то же самое 👋
В сообщении, на которое я дал ссылку, не было решения, поскольку в нем не было полного кода, который вы предоставили здесь. Я предложил вам задать еще один вопрос о «точном количестве меток с выбранными первой и последней», более или менее основанный на том же коде, что и этот. Как вы знаете, в каждом посте должна быть только одна проблема, чтобы это имело смысл.
@kikon ок. Большой палец вверх — это снова ваше. Ваше решение правильное, и код, который вы пишете, тоже. Он делает то, что должен делать. Пост, на который вы ссылаетесь, полностью отличается от запроса. Так что ты в порядке. Но тики графика должны вести себя так, как положено из настройки. Это полно исправлений, которые нужно сделать, чтобы повысить его ценность. Спасибо. Хорошее кодирование 👋
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
оберните div и используйте css, чтобы добиться лучшего способа сделать это dvw, например width: 100dvw
Да, это возможно, но по оси X слишком много значений. Итак, установив tickAmountграфик, он становится более чистым. Спасибо, то же самое.
Вы можете сказать, что это ошибка; или какая-то сомнительная особенность...
Apexcharts работает в определенных условиях (горизонтальная полоса + неподдерживаемый масштаб + размещение отметки !== 'between' и т. д.)
преобразование оси X из category в numeric, см. исходный код.
Вы можете проверить это, добавив console.info(chart.w.config.xaxis.type) после chart.render() — вы получите numeric, а не
category, который вы установили. Я предполагаю, что причиной этого является намеренная оптимизация.
Чтобы сохранить исходные категории, он также создает опцию xaxis.labels.formatter, которая сопоставляет новые числа с
эти оригинальные этикетки. Однако, когда вы нажимаете updateOptions на xaxis, форматтер теряется.
Мне кажется, самое простое решение — просто установить опцию categories оси, когда вы updateOptions:
chart.updateOptions({
xaxis: { type: 'category', tickAmount: newtickamount, categories: options.labels}
})
исходный фрагмент с этим изменением:
var options = {
chart: {
width: '100%',
height: '400px',
stacked: false,
toolbar: { show: false, },
},
labels: [
"29 08 2024 07:04:31", "29 08 2024 07:04:41", "29 08 2024 07:04:51", "29 08 2024 07:05:01", "29 08 2024 07:05:11", "29 08 2024 07:05:21", "29 08 2024 07:05:31", "29 08 2024 07:05:41", "29 08 2024 07:05:51", "29 08 2024 07:06:01", "29 08 2024 07:06:11", "29 08 2024 07:06:21", "29 08 2024 07:06:31", "29 08 2024 07:06:41", "29 08 2024 07:06:51", "29 08 2024 07:07:01", "29 08 2024 07:07:11", "29 08 2024 07:07:21", "29 08 2024 07:07:31", "29 08 2024 07:07:41", "29 08 2024 07:07:51", "29 08 2024 07:08:01", "29 08 2024 07:08:11", "29 08 2024 07:08:21", "29 08 2024 07:08:31", "29 08 2024 07:08:41", "29 08 2024 07:08:51", "29 08 2024 07:09:01", "29 08 2024 07:09:11", "29 08 2024 07:09:21", "29 08 2024 07:09:31", "29 08 2024 07:09:41", "29 08 2024 07:09:51", "29 08 2024 07:10:01", "29 08 2024 07:10:11", "29 08 2024 07:10:21", "29 08 2024 07:10:31", "29 08 2024 07:10:41", "29 08 2024 07:10:51", "29 08 2024 07:11:01", "29 08 2024 07:11:11", "29 08 2024 07:11:21", "29 08 2024 07:11:31", "29 08 2024 07:11:41", "29 08 2024 07:11:51", "29 08 2024 07:12:01", "29 08 2024 07:12:11", "29 08 2024 07:12:21", "29 08 2024 07:12:31", "29 08 2024 07:12:41", "29 08 2024 07:12:51", "29 08 2024 07:13:01", "29 08 2024 07:13:11", "29 08 2024 07:13:21", "29 08 2024 07:13:31", "29 08 2024 07:13:41", "29 08 2024 07:13:51", "29 08 2024 07:14:01", "29 08 2024 07:14:11", "29 08 2024 07:14:21", "29 08 2024 07:14:31", "29 08 2024 07:14:41", "29 08 2024 07:14:51", "29 08 2024 07:15:01", "29 08 2024 07:15:11", "29 08 2024 07:15:21", "29 08 2024 07:15:31", "29 08 2024 07:15:41", "29 08 2024 07:15:51", "29 08 2024 07:16:01", "29 08 2024 07:16:11", "29 08 2024 07:16:21", "29 08 2024 07:16:31", "29 08 2024 07:16:41", "29 08 2024 07:16:51", "29 08 2024 07:17:01", "29 08 2024 07:17:11", "29 08 2024 07:17:21", "29 08 2024 07:17:31", "29 08 2024 07:17:41", "29 08 2024 07:17:51", "29 08 2024 07:18:01", "29 08 2024 07:18:11", "29 08 2024 07:18:21", "29 08 2024 07:18:31", "29 08 2024 07:18:41", "29 08 2024 07:18:51", "29 08 2024 07:19:01", "29 08 2024 07:19:11", "29 08 2024 07:19:21", "29 08 2024 07:19:31", "29 08 2024 07:19:41", "29 08 2024 07:19:51", "29 08 2024 07:20:01", "29 08 2024 07:20:11", "29 08 2024 07:20:21", "29 08 2024 07:20:31", "29 08 2024 07:20:41", "29 08 2024 07:20:51",
],
series: [{
name: 'Hello',
info: 'hello',
type: 'line',
data: [
357, 171, 472, 909, 707, 411, 470, 990, 112, 369, 428, 451, 44, 869, 710, 782, 718, 491, 479, 976, 438, 953, 976, 363, 886, 479, 274, 809, 625, 808, 569, 226, 158, 646, 196, 506, 754, 114, 513, 535, 271, 428, 155, 97, 412, 661, 181, 118, 616, 297, 23, 460, 344, 274, 467, 937, 839, 355, 290, 765, 647, 462, 90, 439, 737, 439, 194, 186, 973, 667, 181, 425, 84, 453, 43, 835, 99, 209, 580, 465, 329, 740, 541, 237, 17, 631, 916, 300, 745, 826, 63, 900, 990, 450, 560, 99, 21, 981, 954,
],
}],
stroke: {
width: 2,
curve: 'smooth',
},
xaxis: {
type: 'category', //category datetime numeric
//tickAmount: 20,
tooltip: { enabled: false, },
tickPlacement: 'on',
labels: { rotate: -60, },
},
yaxis: [
{
show: true,
labels: {
show: true,
},
axisBorder: { show: false, },
axisTicks: { show: false, },
tooltip: { enabled: true, offsetX: -20, },
},
],
tooltip: {
enabled: true,
shared: true,
intersect: false,
inverseOrder: false,
//custom: function({series, seriesIndex, dataPointIndex, w}) { return 'HELLO!'; }),
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
console.info(chart.w.config.xaxis.type)
//Replacing tickamount
function replace_tickamount(){
width = document.body.clientWidth;
newtickamount = 0;
if (width > 1000){
newtickamount = 10;
} else if (width > 500) {
newtickamount = 8;
} else {
newtickamount = 4;
}
chart.updateOptions({
xaxis: { type: 'category', tickAmount: newtickamount, categories: options.labels},
});
}
addEventListener("resize", (event) => {
replace_tickamount();
});<div id = "chart"></div>
<script src = "https://cdn.jsdelivr.net/npm/apexcharts"></script>Другая возможность — явно сохранить labels.formatter, установленный системой при преобразовании оси:
chart.updateOptions({
xaxis: {
tickAmount: newtickamount,
labels: {formatter: chart.w.config.xaxis.labels.formatter}
}
})
исходный фрагмент с этим изменением:
var options = {
chart: {
width: '100%',
height: '400px',
stacked: false,
toolbar: { show: false, },
},
labels: [
"29 08 2024 07:04:31", "29 08 2024 07:04:41", "29 08 2024 07:04:51", "29 08 2024 07:05:01", "29 08 2024 07:05:11", "29 08 2024 07:05:21", "29 08 2024 07:05:31", "29 08 2024 07:05:41", "29 08 2024 07:05:51", "29 08 2024 07:06:01", "29 08 2024 07:06:11", "29 08 2024 07:06:21", "29 08 2024 07:06:31", "29 08 2024 07:06:41", "29 08 2024 07:06:51", "29 08 2024 07:07:01", "29 08 2024 07:07:11", "29 08 2024 07:07:21", "29 08 2024 07:07:31", "29 08 2024 07:07:41", "29 08 2024 07:07:51", "29 08 2024 07:08:01", "29 08 2024 07:08:11", "29 08 2024 07:08:21", "29 08 2024 07:08:31", "29 08 2024 07:08:41", "29 08 2024 07:08:51", "29 08 2024 07:09:01", "29 08 2024 07:09:11", "29 08 2024 07:09:21", "29 08 2024 07:09:31", "29 08 2024 07:09:41", "29 08 2024 07:09:51", "29 08 2024 07:10:01", "29 08 2024 07:10:11", "29 08 2024 07:10:21", "29 08 2024 07:10:31", "29 08 2024 07:10:41", "29 08 2024 07:10:51", "29 08 2024 07:11:01", "29 08 2024 07:11:11", "29 08 2024 07:11:21", "29 08 2024 07:11:31", "29 08 2024 07:11:41", "29 08 2024 07:11:51", "29 08 2024 07:12:01", "29 08 2024 07:12:11", "29 08 2024 07:12:21", "29 08 2024 07:12:31", "29 08 2024 07:12:41", "29 08 2024 07:12:51", "29 08 2024 07:13:01", "29 08 2024 07:13:11", "29 08 2024 07:13:21", "29 08 2024 07:13:31", "29 08 2024 07:13:41", "29 08 2024 07:13:51", "29 08 2024 07:14:01", "29 08 2024 07:14:11", "29 08 2024 07:14:21", "29 08 2024 07:14:31", "29 08 2024 07:14:41", "29 08 2024 07:14:51", "29 08 2024 07:15:01", "29 08 2024 07:15:11", "29 08 2024 07:15:21", "29 08 2024 07:15:31", "29 08 2024 07:15:41", "29 08 2024 07:15:51", "29 08 2024 07:16:01", "29 08 2024 07:16:11", "29 08 2024 07:16:21", "29 08 2024 07:16:31", "29 08 2024 07:16:41", "29 08 2024 07:16:51", "29 08 2024 07:17:01", "29 08 2024 07:17:11", "29 08 2024 07:17:21", "29 08 2024 07:17:31", "29 08 2024 07:17:41", "29 08 2024 07:17:51", "29 08 2024 07:18:01", "29 08 2024 07:18:11", "29 08 2024 07:18:21", "29 08 2024 07:18:31", "29 08 2024 07:18:41", "29 08 2024 07:18:51", "29 08 2024 07:19:01", "29 08 2024 07:19:11", "29 08 2024 07:19:21", "29 08 2024 07:19:31", "29 08 2024 07:19:41", "29 08 2024 07:19:51", "29 08 2024 07:20:01", "29 08 2024 07:20:11", "29 08 2024 07:20:21", "29 08 2024 07:20:31", "29 08 2024 07:20:41", "29 08 2024 07:20:51",
],
series: [{
name: 'Hello',
info: 'hello',
type: 'line',
data: [
357, 171, 472, 909, 707, 411, 470, 990, 112, 369, 428, 451, 44, 869, 710, 782, 718, 491, 479, 976, 438, 953, 976, 363, 886, 479, 274, 809, 625, 808, 569, 226, 158, 646, 196, 506, 754, 114, 513, 535, 271, 428, 155, 97, 412, 661, 181, 118, 616, 297, 23, 460, 344, 274, 467, 937, 839, 355, 290, 765, 647, 462, 90, 439, 737, 439, 194, 186, 973, 667, 181, 425, 84, 453, 43, 835, 99, 209, 580, 465, 329, 740, 541, 237, 17, 631, 916, 300, 745, 826, 63, 900, 990, 450, 560, 99, 21, 981, 954,
],
}],
stroke: {
width: 2,
curve: 'smooth',
},
xaxis: {
type: 'category', //category datetime numeric
//tickAmount: 20,
tooltip: { enabled: false, },
tickPlacement: 'on',
labels: { rotate: -60, },
},
yaxis: [
{
show: true,
labels: {
show: true,
},
axisBorder: { show: false, },
axisTicks: { show: false, },
tooltip: { enabled: true, offsetX: -20, },
},
],
tooltip: {
enabled: true,
shared: true,
intersect: false,
inverseOrder: false,
//custom: function({series, seriesIndex, dataPointIndex, w}) { return 'HELLO!'; }),
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
console.info(chart.w.config.xaxis.type)
//Replacing tickamount
function replace_tickamount(){
width = document.body.clientWidth;
newtickamount = 0;
if (width > 1000){
newtickamount = 10;
} else if (width > 500) {
newtickamount = 8;
} else {
newtickamount = 4;
}
chart.updateOptions({
xaxis: {
tickAmount: newtickamount,
labels: {
formatter: chart.w.config.xaxis.labels.formatter
}
},
});
}
addEventListener("resize", (event) => {
replace_tickamount();
});<div id = "chart"></div>
<script src = "https://cdn.jsdelivr.net/npm/apexcharts"></script>Кикон ты лучший! Я использую это. Именно первый. Я думаю, что categories: options.labels это самый быстрый способ, потому что форматтер должен выполнять больше присваиваний и больше «расчетов». В любом случае я нигде не говорил об изменении меток, а также в исходном коде я ничего не объявил о типе, который становится числовым (как вы видите из консоли). Так что для меня это БОЛЬШАЯ СУМКА С ОШИБКАМИ🪳🐞🐝🐜🦟🕷️🐛🦗🪲🪰. Спасибо за ответ! Большой палец вверх для вас. Ты сделал мой день лучше. Все знания получены! 👋
Это хороший и очень информативный ответ. +1
Обратите внимание, что проблема в обновлении не связана с исходной проблемой с метками, преобразованными в числа.
tickAmountнеточно и это ошибка в AxesUtils#checkLabelBasedOnTickamount но это всегда так, это не связано с какими-либо изменениями. Вы можете убедиться в этом, установивtickAmountв исходной конфигурации, и вы увидите, что без какого-либо изменения размера или обновления осей количество меток галочек обычно не будет равно значениюtickAmount.