Я хочу знать, как преобразовать данные в метке времени в формат «МММ ГГГГ», чтобы отобразить ось X диаграммы.
Вот мой LineChart.vue
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data () {
return {
datacollection: {
labels: [ <-- Timestamps
1600934100.0,
1602009600.0,
1602747060.0,
1603050158.390939,
1603305573.992575
],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
data: [
9.0,
9.5,
2.5,
11.52,
12.4
]
}
]
},
options: {
lineTension: 0,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [
{
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true,
// eslint-disable-next-line no-unused-vars
callback (value, index, values) {
return `${value }%`
}
}
}
],
xAxes: [
{
gridLines: {
display: false
}
}
]
}
}
}
},
mounted () {
this.renderChart(this.datacollection, this.options)
}
}
</script>
Результат, который я получил с помощью этого кода:
Как видно из вывода, ось X не имеет формат «МММ ГГГГ».
В связи с этим у меня два вопроса:
Как преобразовать метки (которые находятся в метке времени) в формат «МММ ГГГГ» и какие изменения я должен внести в свой код, чтобы добиться этого.
Я хочу получать данные из API, а не передавать данные напрямую, поэтому какие изменения я должен внести в свой код?
Примечание. Мой API также содержит временные метки.
Вот как выглядит мой API:
{
"date": [
1600934100.0,
1602009600.0,
1602747060.0,
1603050158.390939,
1603305573.992575
],
"challenge": [
9.0,
9.5,
-2.5,
11.52,
12.4
]
}
Пожалуйста, помогите мне с этим, так как я не могу столкнуться с этим самостоятельно, и я сталкиваюсь с этим уже 2 недели.
Скромная просьба, если кто-нибудь знает ответ, пожалуйста, сообщите мне, изменив мой собственный код и отправив его обратно, потому что я новичок в Vuejs, поэтому обертывание точного компонента или любой логики становится проблемой.
Вы можете преобразовать свои числовые значения в Date
и преобразовать их в правильно отформатированную строку (Date.prototype.toLocaleString()):
const src = [1600934100,1602009600,1602747060,1603050158.390939,1603305573.992575],
dates = src.map(n =>
new Date(n*1e3)
.toLocaleString(
'en-US',
{month: 'short', year: 'numeric'}
))
console.info(dates)
.as-console-wrapper{min-height:100%;}
У вас есть 2 пути решения вашей проблемы. Вы либо изменяете массив, поступающий от API, в нужный формат, либо делаете карту своего массива API на стороне внешнего интерфейса и форматируете каждую дату.
В моем примере я буду использовать luxon:
const result = [
1600934100.0,
1602009600.0,
1602747060.0,
1603050158.390939,
1603305573.992575
].map(date => DateTime.fromMillis(date * 1000).toFormat("MMM yyyy"));
Это в основном создаст новый массив следующим образом
[ "Sep 2020", "Oct 2020", "Oct 2020", "Oct 2020", "Oct 2020" ]
Как создание даты из метки времени, так и ее форматирование в любом формате — это простые и решаемые проблемы с множеством существующих ответов. Вам нужно разбить вашу проблему на отдельные части; Vue или ChartsJS здесь неуместны. То же самое касается загрузки данных из API; даже если ChartJS не поддерживает данные API, вы можете просто загрузить данные, а затем передать их в chartjs.