0

我一直在玩 CanvasJs - 但我在使用表示数据点的表单输入字段生成图表时遇到问题。

例如，如果我有以下要绘制的输入字段：

<input id="box1">: 1st value
<input id="box2">: 2nd value
<input id="box3">: 3rd value

我尝试了以下修改，尝试将输入变量保存在数组中，尽管没有成功：

var diff =  {
        first:  $('#box1').val(),
        second: $('#box2').val(),
            third:  $('#box3').val()
        };

var chart = new CanvasJS.Chart("chartcontainer", {
      title:{
        text: "Graph"              
      },
      axisY:{
      title:"%",
      suffix: "%"
      },
      data: [//array of dataSeries              
        { //dataSeries object

         /*** Change type "column" to "bar", "area", "line" or "pie"***/
         type: "column",
         dataPoints: [
         { label: "first", y: diff.first },
         { label: "second", y: diff.second },
         { label: "third", y: diff.third },                                    
         { label: "fourth", y: 40 },
         { label: "fifth", y: 50 }
         ]
       }
       ]
     });

请参阅小提琴 - 抱歉，我将其包括在内以显示 html 和代码，但我无法弄清楚如何添加 canvasjs cdn。

是否可以在表单输入的图表中使用非静态值？

4

1 回答 1

2

我发现了这个问题——我需要解析我的数组分配的 jQuery 对象。

代替：

...

  dataPoints: [
         { label: "first", y: diff.first },
         { label: "second", y: diff.second },
         { label: "third", y: diff.third },                                    
         { label: "fourth", y: 40 },
         { label: "fifth", y: 50 }

我用parseInt()它解决了图形问题：

      dataPoints: [
             { label: "first", y: parseInt(diff.first, 10) },
             { label: "second", y: parseInt(diff.second, 10) },
             { label: "third", y: parseInt(diff.third, 10) },                                    
             { label: "fourth", y: 40 },
             { label: "fifth", y: 50 }
       ...
于 2014-04-15T21:09:27.980 回答