javascript - Chartist动态输入

Question

我正在制作一个网站，用户可以上传将显示为图表的数据

HTML:<div id="data"></div>

test1.php 输出:,-0.05,-0.07,-0.07,-0.07,0.14,0.14,0.09,0.07,0.07,0.07,0.07,0.65,0.63,0.63,0.63,0.63,0.63,0.58,0.56,0.56,0.56,0.56,0.84,0.79,0.77,0.77

js/jquery:

$(document).ready(function(){

    $("#data").load("test1.php");
    var data = $("#data").text().split(",").slice(1);

    new Chartist.Line(".ct-chart", {

        labels: [data],
        series:[ data ]
        }, {
        fullWidth: true,
        height: 650,
        chartPadding: {
        right: 0
     }

   }); 

});

图表未显示，我收到错误

Uncaught Error: Exceeded maximum number of iterations while optimizing scale step

但是如果我输入 $("#data").text().split(",").slice(1)到控制台并将输出粘贴到标签和系列中，它工作正常，如果您将数据设置为普通数组并且不从页面获取数据，它也可以工作

Answer 1

我假设您使用 $.load 函数运行 xhr 请求。 XHR 请求通常是异步的(谷歌搜索缩写 AJAX 的定义) - 因此您尝试输入的数据在您需要时并不存在。它仅在所有 http 请求完成后从 php 页面返回 - 这很可能是在 Charlist.new() 函数触发之后。

查看此处的文档:http://api.jquery.com/load/

如果您尝试了类似的操作(未测试):

$(document).ready(function(){
$.ajax("test1.php", {
    success:function(response) {
        var data = response.split(",").slice(1);

        new Chartist.Line(".ct-chart", {
                labels: [data],
                series:[ data ]
            }, {
                fullWidth: true,
                height: 650,
                chartPadding: {
                    right: 0
                }
            });
        });
    } 
});

编辑:好的，我更新了一些代码。正如我所说，这是未经测试的。但这应该引导您走向正确的方向。现在就试试。如果它不能 100% 工作，请进行一些测试和调试，也许您会学到一些东西..