用户输入以创建D3饼图

我正在尝试使用d3pie.js用户输入值创建饼图。下面是我的代码功能，但按钮点击随机数字。用户输入以创建D3饼图

但我不想从用户输入字段中获取新的段值。我试着将jquery函数分配给一个变量，然后将该变量赋值为像下面那样的值，但那不起作用。我也尝试直接定义Jquery函数来定义值。

尝试1（没有工作）：

var a = $("#first").val(); 
var num = 4; 

$("#addData").on("click", function() { 

adata.push({ 
    label: num.toString(), 
    value: a 
}); 

pie.updateProp("data.content", adata); 
num++;

尝试2（没有工作）：

adata.push({ 
label: num.toString(), 
value: $("#first").val() 
});

下面是我工作的代码，会很感激一些关于这方面的投入。

var adata = [ 
     { 
      "label": "JavaScript", 
      "value": 5,   
     }, 
     { 
      "label": "Ruby", 
      "value": 3,    
     }, 
     { 
      "label": "Java", 
      "value": 2,    
     } 
    ]; 
-------------------- 
"data": { 
    "sortOrder": "value-desc", 
    "content": adata 
-------------------- 
var num = 4; 
$("#addData").on("click", function() { 
adata.push({ 
    label: num.toString(), 
    value: Math.floor(Math.random() * 10) + 1 
}); 
pie.updateProp("data.content", adata); 
num++; 

-------------------- 
<input type="text" class="form-control" id="first"> 
<button type="button" class="btn btn-default" id="addData">Add Value</button>

来源

2016-10-02 Jamshed Qureshi

@Cyril，它实际上得到自动更新为使用的Math.random的情况。我在这里将输入值分配给对象“值”。感谢您的输入。 –

问题是因为你传递一个字符串在value，它期望一个数字。

在你的代码

adata.push({ 
    label: num.toString(), 
    value: a //incorrect it has to be a number. 
});

需要做

adata.push({ 
    label: num.toString(), 
    value: +$("#first").val() //make it a number so + is appended. 
});

工作代码here

来源

2016-10-02 08:12:39 Cyril

非常感谢。这就像一个魅力。荣誉!! –

用户输入以创建D3饼图

回答

相关问题