Question

我一直在玩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 }
         ]
       }
       ]
     });

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

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

Answer 1

我想出了问题 - 我需要解析我的数组分配的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 }
       ...

在创建CanvasJS图时使用变量来分配数据点？

1 个答案: