Question

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

但我想要从用户输入字段中获取新的段值。我尝试将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>

Answer 1

问题是因为你在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

用户输入以创建D3饼图

1 个答案: