JSON с нерегулярными высшими диаграммами оси x Ошибка 13 - PullRequest
Новая
       51

JSON с нерегулярными высшими диаграммами оси x Ошибка 13

1 голос
/ 05 августа 2020

В течение 10 часов я пытаюсь отобразить данные из базы данных SQL с помощью highgraph. Я прочитал несколько руководств, поэтому теперь я могу создать файл JSON с моими данными, например: 

[{"name":"Temperature","data":[[1596642102000,-127],[1596642118000,-127],[1596642133000,-127]]},{"name":"Pres","data":[[1596642102000,214748364],[1596642118000,214748364],[1596642133000,214748364]]}]

Но я не могу поместить данные в highcharts

ОБНОВЛЕНИЕ: Я пришлось загрузить скрипты, иначе mozilla выдала ошибку о смешанном активном содержимом

EDIT: Вот мой код: у меня появляется ошибка 13 при запуске 

    <!DOCTYPE HTML>
<html>
<head>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/series-label.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<script src="../../code/modules/accessibility.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Basic line chart showing trends in a dataset. This chart includes the
        <code>series-label</code> module, which adds a label to each line for
        enhanced readability.
    </p>
</figure>
<script type="text/javascript">
$(document).ready(function() {
    var options = {
        chart: {
            type: 'spline'
        },
        title: {
            text: 'test'
        },
        subtitle: {
            text: 'test'
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            series: {
                marker: {
                    enabled: true
                }
            }
        },

        colors: ['#6CF', '#39F', '#06C', '#036', '#000'],


        series: [],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    }
    $.getJSON("data.php", function(json) {
        options.series[0] = json[0];
        options.series[1] = json[1];
        chart = new Highcharts.Chart('container',options);    
    });
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Спасибо за вашу помощь :)

1 Ответ

0 голосов
/ 06 августа 2020

Вам необходимо создать массив данных серии со значениями x и y: 

data: [ 
    // x, y
    [0, 1],
    [1, 2],
    [2, 8]
]

Итак, преобразуйте ваши данные в формат, требуемый Highcharts, или создайте перед правильной структурой JSON. 

options.series.forEach(function(s){
    s.data = s.data.map((el, i) => [json[0].data[i], el])
});

Живая демонстрация: http://jsfiddle.net/BlackLabel/u8f0hs5g/

Ссылка API: https://api.highcharts.com/highcharts/series.line.data

...