用戶輸入以創建 D3 餅圖

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.
});

工作代碼在這里