1

在此处输入图像描述我有两个文件

searh_journal.php

<script type="text/javascript">
function submitForm() {

    var form = document.myform;

    var dataString = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: 'journal_table/get_data_journ.php',
        data: dataString,
        success: function (data) {
            $('#container_journal').html(data);

            var options = {
                chart: {
                    renderTo: 'container_journal',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },

                xAxis: {
                    title: {
                        text: 'Year'
                    },
                    categories: []
                },

                yAxis: {
                    title: {
                        text: 'Number of Citations'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },

                series: [{
                    type: 'line',
                    color: '#0066FF',
                    name: 'Citations',
                    data: []
                }]
            }

            $.getJSON("journal_table/get_data_journ.php", function (data) {
                $.each(data, function (key, value) {
                    $.each(value, function (key, value) {
                        options.series[0].data = value;
                    });
                });

                chart = new Highcharts.Chart(options);
            });


        }
    });
    return false;
}
</script>


<div id="container_journal"></div>

get_data_journ.php

<? php
include '../connect.php';


$hello = $_POST['checkedname'];
foreach($hello as $key = > $values) {
    $result_journ = mysql_query("SELECT year, citations, jour_id FROM journ_graph WHERE jour_id = '$values'");

    $rows_journ = array();
    while ($r_journ = mysql_fetch_array($result_journ)) {
        $row_journ[0] = $r_journ[0];
        $row_journ[1] = $r_journ[1];
        array_push($rows_journ, $row_journ);
    }


    print json_encode($rows_journ, JSON_NUMERIC_CHECK);

}

输出是这样的

            | Journal Name | Edgefactor |
    Checkbox| journal1     | 0.56       |
    Checkbox| journal2     | 0.34       |
    Checkbox| journal3     | 0.32       |
    Checkbox| journal4     | 0.14       |
    Checkbox| journal5     | 0.54       |

                       Compare Journal button

在这里，如果用户选择了两个期刊并且他想比较两个期刊（参考图片），他可以点击比较期刊按钮，那么必须为这两个期刊显示图表。

这里的html部分正在工作，我的意思html json是显示了普通数据，但没有显示图表，问题出在$.getJson()我猜的那一行。

4

1 回答 1

3

您需要将 JSON 数组的每一行的适当元素添加到选项中的categories和data数组中。

$.getJSON("journal_table/get_data_journ.php", function (data) {
    $.each(data, function (key, value) {
        options.xAxis.categories.push(value[0]);
        options.series.data.push(value[1]);
    });
于 2013-10-01T03:23:18.843 回答