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 请求通常是异步的（google 首字母缩略词的定义 AJAX）——因此您尝试输入的数据在您需要时不存在。它仅在所有 http-request 完成后从 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% 做一些测试和调试，也许你会学到一些东西..

Chartist 动态输入

Chartist dynamic input

javascript

jquery

chartist.js