Highcharts, загружаемые через ajax, выдают для динамического создания yAxis - PullRequest
Новая
       45

Highcharts, загружаемые через ajax, выдают для динамического создания yAxis

0 голосов
/ 18 января 2019

У меня есть страница, которая динамически обновляет график HighCharts из выпадающего списка с несколькими выборками. 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

  </head>
  <body>
    <!-- FIELDS -->
    <div id="fields">
        <form method="post" action="">
            <select id="f" name="f[]" multiple>
                <option value="rss1" select>1RSS(dB)</option>
                <option value="rss2">2RSS(dB)</option>
                <option value="rqly">RQly(%)</option>
                <option value="rsnr">RSNR(dB)</option>
            </select>
        </form>
    </div>

    <!-- GRAPH -->
    <div id="graph">No selection</div>

    <script>    
        var updateChart = function(json) {
            // console.log(json)
            var options = {
                chart: {
                    renderTo: 'graph',
                    type: 'line',
                    zoomType: 'x'
                },
                title: { text: null },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 0
                    }
                },
                series: []
            }

            options.series = json;
            var chart = new Highcharts.Chart(options);

            // update yaxis
            for (i=0; i<json.length; i++) {
                if(i==0) {
                    // it seems that a yAxis already exist when graph is initialized. Did not find a smarter way to destroy it...
                    chart.yAxis[0].update({ title: { text: json[i].name }});
                } else {
                    chart.addAxis({ title: { text: json[i].name } });
                }
            }
        }

        $(document).ready(function() {
            $('#f').change(function() {
                var requestParams = { f: $('#f').val() };
                $.post('analysisajax.php', requestParams, updateChart);             
            });
        });    

    </script>

  </body>
</html>

Теперь мой analysisajax.php файл выглядит так: 

<?php
header("Content-type: text/json");
// Initialize the session
session_start();

// Include config file
require_once "config.php";

$jsonObject = array();
$yaxis = 0;

foreach($_POST["f"] as $v) {

    $data = array();
    $sql = "SELECT $v FROM log WHERE id_user = " . $_SESSION["id_user"];
    $result = $link->query($sql);

    while($row = $result->fetch_row()) {
        $data[] = $row[0];
    }

    $jsonObject[] = array(
            "name" => $v,
            "data" => $data,
            "yAxis"=>$yaxis
        );
    $yaxis++;
}

$myJSON = json_encode($jsonObject, JSON_NUMERIC_CHECK);
echo $myJSON;

// Close connection
mysqli_close($link);
?>

Когда я выбираю 1 значение из формы, график загружается без проблем, но как только из выпадающего списка выбрано более 1 значения, график завершается ошибкой со следующей трассировкой: 

highcharts.src.js:498 Uncaught Error: Highcharts error #18: www.highcharts.com/errors/18
    at Object.a.error (highcharts.src.js:498)
    at highcharts.src.js:32669
    at Array.forEach (<anonymous>)
    at r.<anonymous> (highcharts.src.js:32621)
    at a.fireEvent (highcharts.src.js:2635)
    at r.bindAxes (highcharts.src.js:32618)
    at r.init (highcharts.src.js:32482)
    at a.Chart.initSeries (highcharts.src.js:26913)
    at highcharts.src.js:28765
    at Array.forEach (<anonymous>)

Я чувствую, что проблема связана с моей динамической конструкцией yAxis, но я не могу найти способ заставить ее работать. Любая идея? Большое спасибо.

1 Ответ

0 голосов
/ 19 января 2019

Я в итоге заставил его работать со следующим решением:

В скрипте analysisajax.php я больше не генерирую yaxis. Я только отправляю name и data.

Код для генерации графика теперь выглядит так: 

    var updateChart = function(json) {
        //console.log(json)
        var options = {
            chart: {
                renderTo: 'graph',
                type: 'line',
                zoomType: 'x'
            },
            title: { text: null },
            yAxis:[],
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'bottom'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 0
                }
            },
            series: [],
            tooltip: { shared: true }
        }

        var chart = new Highcharts.Chart(options);

        // update axis and series
        for (i=0; i<json.length; i++) {
            // add axis
            chart.addAxis({ title: { text: json[i].name } });

            // add serie
            var a = chart.series.length;
            var seriesOptions = {
                name: json[i].name,
                data: json[i].data,
                yAxis: a
            }
            chart.addSeries(seriesOptions,true);
            chart.options.series.push(seriesOptions);       
        }
    }

    $(document).ready(function() {
        $('#f').change(function() {
            var requestParams = { f: $('#f').val() };
            $.post('analysisajax.php', requestParams, updateChart);             
            //return false;
        });
    });
...