Метки ввиде месяцев вместо дат на графике
Как изменить метки по оси х на месяцы, чтобы вместо дат, показывало месяцы, а уже когда наводишь на какую-то точку на графике, вот что бы там уже показывало конкретную дату? Файл json с данными я прикрепляю тут https://jsfiddle.net/andrewphoenix228/6aeyLp3s/1/, поскольку он очень большой и слишком много данных было бы на страницу, поэтому я его решил поместить в онлайн редактор.
async function fetchData() {
const url = 'currency.json';
const response = await fetch(url);
const datapoints = await response.json();
console.log(datapoints);
const dates = [];
const dollars = [];
const euro = [];
for (i = 0; i < datapoints.length; i++) {
dates[i] = datapoints[i].date;
dollars[i] = datapoints[i].usd;
euro[i] = datapoints[i].eur;
}
const data = {
labels: dates,
datasets: [
{
label: "Euro",
data: euro,
borderColor: "#FF9800",
borderWidth: 1
},
{
label: 'Dollars',
data: dollars,
borderColor: '#42A5F5',
borderWidth: 1
}
]
};
// config
const config = {
type: 'line',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config,
);
};
fetchData();
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: calc(100vh - 1px);
background-color:#1abc9c;
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1000px;
padding: 20px;
border-radius: 20px;
border: solid 3px #212121;
background: white;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Currency Chart</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
Ответы (1 шт):
Похоже, что заголовок оси Х и заголовок всплывающего окошка (при наведении курсора мышки на точку графика) взаимосвязаны, данные берутся из одного массива. Но с помощью плагина tooltip можно изменить текст label всплывающего окошка примерно таким кодом.
Сразу сделал ось с выводом только года.
let somedata = [{
"date": "04.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.2808
},
{
"date": "05.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.2808
},
{
"date": "06.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.3876
},
{
"date": "07.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.389
},
{
"date": "08.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.1901
},
{
"date": "09.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.411
},
{
"date": "10.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.3934
},
{
"date": "11.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.3934
},
{
"date": "12.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 31.3934
},
{
"date": "13.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.9327
},
{
"date": "14.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.5626
},
{
"date": "15.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.567
},
{
"date": "16.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.5962
},
{
"date": "17.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.3885
},
{
"date": "18.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.3885
},
{
"date": "19.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.3885
},
{
"date": "20.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.6899
},
{
"date": "21.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.7952
},
{
"date": "22.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.861
},
{
"date": "23.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.7542
},
{
"date": "24.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.7337
},
{
"date": "25.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.7337
},
{
"date": "26.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.7337
},
{
"date": "27.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.7674
},
{
"date": "28.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.9122
},
{
"date": "29.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.9151
},
{
"date": "30.06.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.7776
},
{
"date": "01.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.4017
},
{
"date": "02.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.4017
},
{
"date": "03.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.4017
},
{
"date": "04.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.526
},
{
"date": "05.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.5816
},
{
"date": "06.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 30.1135
},
{
"date": "07.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.8122
},
{
"date": "08.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.8107
},
{
"date": "09.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.8107
},
{
"date": "10.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.8107
},
{
"date": "11.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.701
},
{
"date": "12.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.5109
},
{
"date": "13.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.3675
},
{
"date": "14.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.4494
},
{
"date": "15.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.2754
},
{
"date": "16.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.2754
},
{
"date": "17.07.2022",
"Час": "00.00",
"Код цифровий": 978,
"Код літерний": "EUR",
"Кількість одиниць": 1,
"Назва валюти": "Євро",
"eur": 29.2754
},
{
"date": "23.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 27.1915
},
{
"date": "24.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 27.1915
},
{
"date": "25.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 27.1915
},
{
"date": "26.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 27.048
},
{
"date": "27.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.9805
},
{
"date": "28.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.906
},
{
"date": "29.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8628
},
{
"date": "30.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8867
},
{
"date": "31.07.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8867
},
{
"date": "01.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8867
},
{
"date": "02.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8168
},
{
"date": "03.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8444
},
{
"date": "04.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8411
},
{
"date": "05.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.9094
},
{
"date": "06.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.9395
},
{
"date": "07.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.9395
},
{
"date": "08.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.9395
},
{
"date": "09.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8346
},
{
"date": "10.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8011
},
{
"date": "11.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.7557
},
{
"date": "12.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.8042
},
{
"date": "13.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.7686
},
{
"date": "14.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.7686
},
{
"date": "15.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.7686
},
{
"date": "16.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6931
},
{
"date": "17.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6457
},
{
"date": "18.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6752
},
{
"date": "19.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6455
},
{
"date": "20.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6504
},
{
"date": "21.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6504
},
{
"date": "22.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6504
},
{
"date": "23.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6504
},
{
"date": "24.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6504
},
{
"date": "25.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.6718
},
{
"date": "26.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.7074
},
{
"date": "27.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.7744
},
{
"date": "28.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.929
},
{
"date": "29.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.929
},
{
"date": "30.08.2021",
"Час": "00.00",
"Код цифровий": 840,
"Код літерний": "USD",
"Кількість одиниць": 1,
"Назва валюти": "Долар США",
"usd": 26.929
}
];
let month = {
"01": "январь",
"02": "февраль",
"03": "март",
"04": "апрель",
"05": "май",
"06": "июнь",
"07": "июль",
"08": "август",
"09": "сентябрь",
"10": "октябрь",
"11": "ноябрь",
"12": "декабрь",
}
async function fetchData() {
//у меня somedata массив с данными объявлен выше
//ты получаешь этот массив фетчем
//const datapoints = fetch().json();
const datapoints = somedata;
const dates = [];
const dollars = [];
const euro = [];
for (i = 0; i < datapoints.length; i++) {
//обрезаю дату, оставляя только лишь месяц
//затем из подготовленнго объекта месяцев выбираю нужный
dates[i] = month[datapoints[i].date.substring(3, 5)];
dollars[i] = datapoints[i].usd;
euro[i] = datapoints[i].eur;
}
const data = {
labels: dates,
datasets: [{
label: "Euro",
data: euro,
borderColor: "#FF9800",
borderWidth: 1
},
{
label: 'Dollars',
data: dollars,
borderColor: '#42A5F5',
borderWidth: 1
}
]
};
// config
const config = {
type: 'line',
data,
options: {
scales: {
y: {
beginAtZero: true
}
},
//подключаю плагин tooltip
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y;
}
if (context.dataIndex !== null) {
//у точки графика есть нумерованный ключ
//совпадающий с индексом массива datapoints=somedata
//поэтому берем необходимые данные из datapoints
label += ` (${datapoints[context.dataIndex].date})`;
}
return label;
}
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config,
);
};
fetchData();
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: calc(100vh - 1px);
background-color: #1abc9c;
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1000px;
padding: 20px;
border-radius: 20px;
border: solid 3px #212121;
background: white;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Currency Chart</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>