从远程JSON填充Jqplot [英] Populate Jqplot from remote JSON

问题描述

我正在尝试从PHP文件中的外部JSON填充条形图.我试图使用AJAX和getJSON函数来执行此操作，但仍然无法生成图表.

I'm trying to populate a bar chart from an external JSON in a PHP file. I've trying to use AJAX and getJSON function to do this but still failed to generate a chart.

这是我的JSON格式:

Here is how my JSON format look like:

[
    {
        "NAME": "a chart",
        "VALUES": "[[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]]"
    }
]

这是JavaScript:

Here is the javascript:

    $(document).ready(function() {
         urlDataJSON = 'data.php';

    $.getJSON(urlDataJSON, function (data) {

        console.log(data.output);

        var dataLabels = ['base', 'key', 'pacing', 'emerging'];
        var dataLines = json[0].VALUES;
        var chartTitle = json[0].NAME;


        $.jqplot('chart2', dataLines, {
            legend: {
                show: true
            },
            title: chartTitle,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                pointLabels: {
                    show: true,
                    location: 'e',
                    edgeTolerance: -15
                },
                shadowAngle: 135,
                renderOptions: {
                    barDirection: 'horizontal'
                }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: dataLabels
                }
            }
        });
    });

你们知道我上面的代码有什么问题吗?如果有的话，请告诉我.

Do you guys know what's wrong with my code above? If anything please let me know.

编辑:代码已更新

            var urlDataJSON = 'data.php';
/*                var json = [{
                    "Name": "Poll Results",
                    "Serie": [[2, 5, 4], [4, 1, 7], [6, 3, 1], [3, 4, 2]]}];*/
            $.getJSON(urlDataJSON, function (data) {

                console.log(data);

                var tick = ['asd','fsdf','asda','fdsf',];
                var dataLines = [];
                var title = [];

                $.each(data, function (entryindex, entry) {
                    dataLines.push(entry['VALUES']);
                    title.push(entry['NAME']);
                });

                var options = {
                    legend: {
                        show: true
                    },
                    title: 'Poll Results',
                    seriesDefaults: {
                        renderer: $.jqplot.BarRenderer,
                        pointLabels: {
                            show: true,
                            location: 'e',
                            edgeTolerance: -15
                        },
                        shadowAngle: 135,
                        renderOptions: {
                            barDirection: 'horizontal'
                        }
                    },
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: tick
                        }
                    }
                };
                var plot = $.jqplot('chart2', [dataLines], options);
            });

我放置了.each()函数来将数据推入数组.现在，该图为空.仅显示背景.

I've put .each() function to push data into an array. Now, the graph is empty. Only the background is showing.

推荐答案

$(document).ready(function() {

    $.getJSON('data.php', function (data) {

        var tick = ['asd','fsdf','asda','fdsf'];

        var options = {
            legend: {
                show: true
            },
            title: 'Poll Results',
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                pointLabels: {
                    show: true,
                    location: 'e',
                    edgeTolerance: -15
                },
                shadowAngle: 135,
                renderOptions: {
                    barDirection: 'horizontal'
                }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: tick
                }
            }
        };
        var plot = $.jqplot('chart2', data[0].VALUES, options);
    });
});

确保包括这些插件

<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.pointLabels.min.js"></script>

这是我的data.php

This is my data.php

$arr = [
    "NAME" => "a chart",
    "VALUES" => [[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]]
];

header('Content-Type: application/json');
print json_encode([$arr]);

这篇关于从远程JSON填充Jqplot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！