Форум

рони · #11 (**permalink**) 31.05.2021, 20:27

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>

ureech · #12 (**permalink**) 31.05.2021, 20:38

ksa, ааа..,а я всё наобород пробовал).

ureech · #13 (**permalink**) 31.05.2021, 20:39

рони, weight и weist заранее не известны.

рони · #14 (**permalink**) 31.05.2021, 20:56

Сообщение от ureech

weight и weist заранее не известны.

это не многое изменит ... )))

ureech · #15 (**permalink**) 31.05.2021, 21:20

рони, ясно.Разберусь значит. Спасибо).

ureech · #16 (**permalink**) 31.05.2021, 21:20

ksa, спасибо большое).

рони · #17 (**permalink**) 31.05.2021, 21:56

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>

ureech · #18 (**permalink**) 01.06.2021, 09:20

Да,ужж...Массивы(объекты) это что то. В php такая же хрень. Пока въехал,весь мозг себе вынес))).
P.S. Вот глаз, сразу заметили точки и запятые. А я только тогда,когда увидел прерывающийся график)

Форум

Справочник

Discord чат

Курсы javascript