CanvasXpress远程过程 - 重绘图形

时间:2014-01-15 13:52:25

标签: javascript ajax json

我正在尝试使用来自ajax调用的数据重绘Scatter3D图。不幸的是,我无法实现。我阅读了文档但仍然没有。 有没有人有一个工作的例子或以前做过?

编辑:联系开发人员解决。 updateRemoteData()仍在构建和测试中,因此他建议使用updateData();

的index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Points testing</title>
    <script src="http://simplexpg.zz.mu/js/jquery.js"></script>
    <script src="http://simplexpg.zz.mu/js/CanvasXpress.min.js"></script>
    <script src="http://simplexpg.zz.mu/js/excanvas.js"></script>
    <script>
        $(document).ready(function() {
            vars = new Array();
            data = [[0, 0, 0]];
            variables = ["x1", "x2", "x3"];
            x = {};

            function generateData(data) {
                vars = new Array();
                for (var i = 0; i < data.length; i++) {
                    vars[i] = ("Punkt" + (i + 1));
                }
                x = {
                    "y": {
                        "vars": vars,
                        "smps": [
                            variables[0],
                            variables[1],
                            variables[2]
                        ],
                        "desc": [
                            "Simplex method"
                        ],
                        "data": data
                    }
                };
                return x;
            }

            //--------------------------

            x = generateData(data);
            cx = new CanvasXpress('canvas1', x, {
                graphType: "Scatter3D",
                useFlashIE: true,
                xAxis: [
                    variables[0]
                ],
                yAxis: [
                    variables[1]
                ],
                zAxis: [
                    variables[2]
                ],
                scatterType: false,
                setMinX: 0,
                setMinY: 0,
                setMinZ: 0,
                showAnimation: true,
            });
            //-----------------------
            //TRY REMOTE
            $('#button1').click(function() {
                $.ajax({
                    url: "source.php",
                    dataType: "json",
                    type: "GET",
                    data: {'a': $('#select1 option:selected').val()},
                    success: function(ajaxData) {
                        if (Array.isArray(ajaxData) && ajaxData.length > 0) {
                            cx.xAxisTitle = "x2";
                            cx.yAxisTitle = "x3";
                            cx.zAxisTitle = "x4";
                            cx.updateData(generateData(ajaxData));
                        }
                    },
                    error: function(ajaxData) {
                        alert(ajaxData);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <canvas id="canvas1" width="613" height="500"></canvas>
    <select id="select1">
        <option value="a">a</option>
        <option value="b">b</option>
    </select>
    <input type="button" id="button1" value="Send"/>
</body>

和source.php

<?php

    $json = array();
    if (isset($_GET['a'])) {
    switch ($_GET['a']) {
        case 'a':
            $json[] = Array(1, 1, 1);
            break;
        case 'b':
            $json[] = Array(2, 2, 2);
            break;
        default :
            $json[] = Array(3, 3, 3);
            break;
    }
    }
echo json_encode($json);

编辑:

我还试图获得常规$ .ajax()调用并重新实例化该对象,但是我得到了可怕的平滑度并减小了图形的大小(多次完成时降低到1x1像素)。

0 个答案:

没有答案