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, время: 14:45. |