Question

我有一个页面，可从多选下拉列表动态更新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的动态构造中，但是找不到使它起作用的方法。任何想法？非常感谢。

Answer 1

我最终使它与以下解决方案一起工作：

在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;
        });
    });

通过ajax加载的Highcharts，发布以动态创建yAxis

1 个答案: