И снова графики...
Привет. Строю гафики с помощью библиотеки Highcharts. На входе имею такой объект.
Object { weight: (6) […], weist: (6) […] }
weight: Array(6) [ {…}, {…}, {…}, … ]
0: Object { "2021-05-01": 100 }
1: Object { "2021-05-05": "99,9" }
2: Object { "2021-05-10": 99 }
3: Object { "2021-05-15": "98,5" }
4: Object { "2021-05-20": 98 }
5: Object { "2021-05-25": 97.5 }
length: 6
weist: Array(6) [ {…}, {…}, {…}, … ]
0: Object { "2021-05-01": 100 }
1: Object { "2021-05-05": "99,9" }
2: Object { "2021-05-10": 99 }
3: Object { "2021-05-15": 98 }
4: Object { "2021-05-20": 97 }
5: Object { "2021-05-25": 96.5 }
length: 6
Для графиков мне нужны такие массивы или это строки.Не пойму. Но нужны именно в таком виде
let date = [];
let total = [];
date = ['2021-05-01','2021-05-05',...]
total = [{
name:'weight',data:[100,99,98.5,98,97,5]
},
{name:'weist',data[100,99.9,...]}
]
Подскажите как собрать это дело )? |
Цитата:
А циферки записать в другие массивы в нужную позицию. |
ureech,
объект нарисуйте. |
Если я правильно понял... :write:
const obj = {
weight: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": "98,5"},
{ "2021-05-20": 98 },
{ "2021-05-25": 97.5 },
],
weist: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": 98},
{ "2021-05-20": 97},
{ "2021-05-25": 96.5}
]
}
let date = []
let total = [
{name: 'weight', data: []},
{name: 'weist', data: []}
]
for (let key in obj) {
const ttl = total.find(e => e.name === key)
for (let i = 0; i < obj[key].length; i++) {
const a = Object.keys(obj[key][i])
date[i] = a[0]
ttl.data[i] = obj[key][i][a[0]]
}
}
alert(JSON.stringify(date) + '\n' + JSON.stringify(total))
|
ksa, да так. Только у меня что то не хочет работать.Видимо с моим объектом что то не так. Буду смотреть.
рони, что значит нарисовать? Не понял. |
Цитата:
|
Только один момент.
let total = [
{name: 'weight', data: []},
{name: 'weist', data: []}
]
тут значение name так нельзя прописать. Они заранее не известны. |
У меня Uncaught TypeError: ttl is undefined. не пойму почему. Объекты вроде одинаковые.
|
Разобрался с ошибкой.
|
Цитата:
const obj = {
weight: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": "98,5"},
{ "2021-05-20": 98 },
{ "2021-05-25": 97.5 },
],
weist: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": 98},
{ "2021-05-20": 97},
{ "2021-05-25": 96.5}
]
}
let date = []
let total = []
for (let key in obj) {
let ttl = {
name: key,
data: []
}
for (let i = 0; i < obj[key].length; i++) {
const a = Object.keys(obj[key][i])
date[i] = a[0]
ttl.data[i] = obj[key][i][a[0]]
}
total.push(ttl)
}
alert(JSON.stringify(date) + '\n' + JSON.stringify(total))
|
highcharts подготовка данных
ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script>
let op = {
title: {
text: 'График'
}
};
const obj = {
weight: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": "98,5"},
{ "2021-05-20": 98 },
{ "2021-05-25": 97.5 },
],
weist: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": 98},
{ "2021-05-20": 97},
{ "2021-05-25": 96.5}
]
}
const rep = a => typeof a == "string" ? +a.replace(",", ".") : a;
const fn = ({ weight, weist }) => ({
xAxis: {
categories: weight.map(a => Object.keys(a)[0])
},
series: [{
name: 'weight',
data: weight.map(a => rep(Object.values(a)[0]))
},
{
name: 'weist',
data: weist.map(a => rep(Object.values(a)[0]))
}
]
})
Object.assign(op, fn(obj));
Highcharts.chart('container', op);
</script>
</body>
</html>
|
ksa, ааа..,а я всё наобород пробовал).
|
рони, weight и weist заранее не известны.
|
Цитата:
|
рони, ясно.Разберусь значит. Спасибо).
|
ksa, спасибо большое).
|
ureech,
шифровка из центра)))
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script>
let op = {
title: {
text: 'График'
}
};
const obj = {
weight: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": "98,5"},
{ "2021-05-20": 98 },
{ "2021-05-25": 97.5 },
],
weist: [
{ "2021-05-01": 100},
{ "2021-05-05": "99,9"},
{ "2021-05-10": 99},
{ "2021-05-15": 98},
{ "2021-05-20": 97},
{ "2021-05-25": 96.5}
]
}
const rep = a => typeof a == "string" ? +a.replace(",", ".") : a;
const fn = obj => ({
xAxis: {
categories: Object.values(obj)[0].map(a => Object.keys(a)[0])
},
series: Object.entries(obj).map(([name, data]) => (data = data.map(a => rep(Object.values(a)[0])), {name, data}))
})
Object.assign(op, fn(obj));
Highcharts.chart('container', op);
</script>
</body>
</html>
|
Да,ужж...Массивы(объекты) это что то. В php такая же хрень. Пока въехал,весь мозг себе вынес))).
P.S. Вот глаз, сразу заметили точки и запятые. А я только тогда,когда увидел прерывающийся график) |
| Часовой пояс GMT +3, время: 01:44. |