Question

我是编程的新手，所以如果我不清楚我的解释，请放轻松... 在Web2Py视图中，我有一个带有id =“convgraphdata”的div，其中包含我想用ChartJS绘制的数字。数字因输入而异，但如下所示：[4,6,7,3,20,46，...]。由于我想绘制动态数据，我想让ChartJS从div中获取文本，将其转换为数组，然后绘制数组中的数据。我已经尝试了很多方法从div中获取数据并且无法使其工作。

例如，ChartJS代码是：

var lineChartData = {
    labels : days(),
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : convdata()
        }]}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}
function days() {
    var days = []; 
    for (var i = 1; i <= 365; i++) {days.push(i);};
    return days;}

并且convdata（）函数是我遇到麻烦的地方。我的代码是：

function convdata() {
    var convdata = [];
    var data1 = document.getElementById("convgraphdata").textContent.slice(1, -1);
    var convdata = data1.split(",").map(Number);
    return convdata;}

我也尝试了很多其他方法。每当我包含从div中获取文本的代码时，图表都不会加载。不确定这是否有用，但div内容是Web2Py中AJAX调用的结果。 Web2Py喜欢将结果返回给HTML元素，但如果有另一种方法将其直接发送到ChartJS数组，这也可以。任何帮助非常感谢。

安东尼，回答你的问题，完整的功能很长很复杂所以我会在这里给出一个简短的解释... javascript函数获取javascript用户输入内的数据然后使用Web2Py标准Ajax发送到服务器功能格式为：

function conv_model(){
    ajax(['graph'],['select1', 'rate1', 'waittime1'], 'convgraphdata');}

python中的服务器端函数对数据进行计算，并将结果返回给客户端div，其id和名称为“convgraphdata”。这个数据是我想在ChartJS中绘制的数据。

服务器端，python函数的格式为：

def graph():
# numerous calculations on user inputs
return dict(totalN=totalN)

还有一个名为graph.html的视图，其中包含代码：

{{=totalN}}

希望这是足够的细节。

Answer 1

你说：

Web2Py喜欢将结果返回给HTML元素

但这正是内置的ajax功能所做的。

您可以使用jQuery（与web2py捆绑在一起）从控制器获取数据：

.notes-list-box>div{
float:left;
width:120px;
background-color:yellow;
margin: 5px;
height:100%;
overflow:auto;
}

.heading{
  background-color:red;
}

.notes-list-box{
  background-color:green;
  overflow:auto;
  height:100%;
}

body,html{
  height:100%;
}

在控制器中：

function getData() {
  $.ajax({
     url: "your_controller/get_data.json?", 
     data: { input1: "hello", input2: "bye"},
     success: function(result){
       //do what you want with result...
     }
  });
}

从div文本中抓取数组以使用ChartJS进行绘图

1 个答案: