Javascript 使用从textarea获取的值在折线图中绘制直线

从一段时间以来，我一直在努力完成我的大项目，但多亏了您在stackoverflow上的帮助，我成功地快速完成了90%的工作。谢谢你，你太棒了

现在，我有我的最后一个问题，那就是，从textarea的值中绘制一条线。 这是我的密码：

$(function () {
var chart;
var params = getParams(document.location.search); 
var title= "Graphical representation";  
var subtitle= "Options";

var yaxis= "Increasing in %";

var xvalues = [];
if(params.hasOwnProperty("xvalues")) 
{
      if(params.xvalues != "") 
      {
        xvalues = CSVToArrayStr(params.xvalues, ',');
      }
}
else 
{
  params.xvalues= [ '2007', '2008', '2009', '2010'];
  xvalues = CSVToArrayStr(params.xvalues, ',');
}


// Drawing the first sample
     var series = Array();
 var sample = {};
sample.name = 'Sample1';
sample.data = [1.6, 3.9, 3.3, 4.0];
series.push(sample);

 //Calculating the 2nd sample using math formula 
    function calc(data) { 
    ret = []; 
    for(var i = 0; i < data.length; i++) { 
    data[i] = parseFloat(data[i]); 
    ret[i] = (3.5 + data[i] + 0.5 * (data[i] - 3)); //parse the string to float
    ret[i] = Math.round(ret[i] * 100) / 100;   // rounding to 2 decimals
 } 
   return ret; 
 }

//Drawing the second sample according to the math formula
var stapka = {};
stapka.name = 'Sample2';
 stapka.data = calc(sample.data); // - calculated data
 series.push(stapka);


//Taking value from the textarea
      $.valHooks.textarea = {
  get: function( elem ) {
  return elem.value.replace( /\r?\n/g, "\r\n" );
    }
};


//Transfering values from the textarea to array
var  sample3 = {};
sample3.data = $('textarea').val();
sample3.data = sample3.data.split(",");



if(params.hasOwnProperty("values_serie1")) {
    if(params.values_serie1 != "") 
    {

        series = getSeries(params);



   // The following code is PROBLEMATIC         


var result = {};
result.name = 'Calculated values';
result.data = calc(sample3.data); //here seems to be the problem
series.push(result);


    }
}

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
        },
        title: {
            text: title,
            x: -20 //center
        },
        xAxis: {
            categories: xvalues[0]
        },

        yAxis: {
            title: {
                text: yaxis
            },

        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'<\/b><br/>'+
                  'Year ' + this.x +': Rate '+ this.y + '%';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right'
        },

       series: series

  });
 });
});

$（函数（）{
var图；
var params=getParams（document.location.search）；
var title=“图形表示”；
var subtitle=“选项”；
var yaxis=“增加%”；
var xvalues=[]；
if（参数hasOwnProperty（“xvalues”））
{
如果（params.xvalues！=“”）
{
xvalues=csvToaryStr（参数xvalues，'，'）；
}
}
其他的
{
参数xvalues=['2007'、'2008'、'2009'、'2010']；
xvalues=csvToaryStr（参数xvalues，'，'）；
}
//绘制第一个样本
var系列=数组（）；
var-sample={}；
sample.name='Sample1'；
sample.data=[1.6,3.9,3.3,4.0]；
系列推送（样品）；
//用数学公式计算第二个样本
函数计算（数据）{
ret=[]；
对于（var i=0；i+
'年'+此.x+'：利率'+此.y+'%；
}
},
图例：{
布局：“垂直”，
对齐：“右”
},
系列：系列
});
});
});

我知道这是一个很长的代码，但请看一看有问题的代码。 以下是此代码需要执行的操作：

根据提供的样本数据绘制第一条线

根据提供的数学公式绘制第二条线

用户输入第一行的值

图表画出了第一条线

图表根据提供的公式自动绘制第二行（这是我的问题）

我不知道我的错误在哪里，一切都在运转。。。2个样本成功绘制，输入值（第1行）也成功绘制，但当我需要计算第2行的值时，它们不希望出现在图表上：/

下面是HTML的全部代码

这是我想要的形象。。。

请帮帮我，这对我来说非常重要。 万分感谢

我是网站管理员。我很高兴听到您将其用于线图生成器代码；）

您没有正确使用getSeries和getParams函数。 这些函数用于处理多个系列（从url检索）

无论如何，我已经为您制作了一个工作代码的小样本

根据您的需要进行调整；）

摊销
计算不同的值：
插入X轴的年份

通货膨胀：


将通货膨胀率设置为：

计算结果




$（函数（）{
var图；
var params=getParams（document.location.search）；
var title=“通货膨胀和利率的图形表示”；
var subtitle=“选项”；
var yaxis=“增加%”；
/*数组xvalues…如果字段中有这些年的插入值，我们将它们转换为字符串*/
var xvalues=[]；
var yserie=“Foo”；
var yvalues=[]；
if（参数hasOwnProperty（“xvalues”））
{
如果（params.xvalues！=“”）
{ 
xvalues=csvToaryStr（参数xvalues，'，'）；
}
}
if（参数hasOwnProperty（“系列1”））{
如果（params.serie1！=“”）{
yserie=参数系列1；
}
}
if（参数hasOwnProperty（“值系列1”））{
如果（参数值系列1！=“”）{
yvalues=CsvToarayint（参数值系列1，，）；
}
}
警报（“xValue:+xvalues+”\nSerie:+yserie+“\nyvalues:+yvalues”）；
var inflatdata=Y值[0]。切片（0）；
var inflatserie=“充气”；
对于（var i=0；i    <!DOCTYPE html>
<html>
<head>
<title>Amortization</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="./js/highcharts.js" type="text/javascript"></script>
  <script src="./js/modules/exporting.js" type="text/javascript"></script>
  <script src="./js/utils.js" type="text/javascript"></script>



</head>
<body>
<h3 align="center">Calculating for different values:</h3>


 <form action="#container"   method="GET">
        <div class="item" align="center"><label for="xvalues" >Insert years for X axis</label><br/><input type="text" name="xvalues" placeholder="2007, 2008, 2009, 2010, 2011"></div>

        <div class="item_expandable" style="display:none" align="left"><label for="serie1">Inflation :</label><input type="text" name="serie1" placeholder="Инфлација"> </div>

        <br/>
        <div align="center">
 <label for="values_serie1" >Put the inflation rate:</label><br/><textarea  id="inflacija" rows="4" name="values_serie1" placeholder="1.6, 3.9, 3.3, 4, 2.5, 2.8"></textarea></div>

<div align="center">
<button>Calculate the result</button>
</div>
        <br/>
       <br/>
</form>

<script type="text/javascript">
  $(function () {
    var chart;

    var params = getParams(document.location.search); 

    var title= "Graphical representation of inflation and interest rate";   
    var subtitle= "Options";

    var yaxis= "Increasing in %";

/*Array xvalues... if there are inserted values in the field for the years, we take them and convert to string*/
    var xvalues = [];
    var yserie = "Foo";
    var yvalues = [];
    if(params.hasOwnProperty("xvalues")) 
    {
          if(params.xvalues != "") 
          { 
            xvalues = CSVToArrayStr(params.xvalues, ',');

          }
    }

    if(params.hasOwnProperty("serie1")) {
        if(params.serie1 != "") {
            yserie = params.serie1;
        }
    }

    if(params.hasOwnProperty("values_serie1")) {
        if(params.values_serie1 != "") {
            yvalues = CSVToArrayInt(params.values_serie1, ',');
        }
    }
    alert("xcalues : " + xvalues + "\nyserie : " + yserie + "\nyvalues : " + yvalues);

    var inflatdata = yvalues[0].slice(0);
    var inflatserie = "inflat"; 
    for(var i = 0; i < inflatdata.length; i++) { 
     inflatdata[i] = parseFloat(inflatdata[i] + 5); 
     // here we parse our string to float
     //inflatdata[i] = (3.5 + inflatdata[i] + 0.5 * (inflatdata[i] - 3));
     //inflatdata[i] = Math.round(inflatdata[i] * 100) / 100;
    }

    console.log(JSON.stringify(xvalues));
    console.log(JSON.stringify(yserie));
    console.log(JSON.stringify(yvalues));
    console.log(JSON.stringify(inflatserie));
    console.log(JSON.stringify(inflatdata));
    //console.log(JSON.stringify(data));

//Options for desigining the chart
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
            },
            title: {
                text: title,
                x: -20 //center
            },


            xAxis: {
                categories: xvalues[0],
                lineWidth: 1
            },
            yAxis: {
                title: {
                    text: yaxis
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }],

                lineWidth: 1,
                 lineColor: '#92A8CD',
                 tickWidth: 3,
                 tickLength: 6,
                 tickColor: '#92A8CD',
                 minorTickLength: 3,
                 minorTickWidth: 1,
                 minorTickColor: '#D8D8D8',

                 tickInterval: 2,
                minorTickInterval: 1,
                minorGridLineColor: '#ADADAD',
                minorGridLineDashStyle: 'LongDashDot'
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'<\/b><br/>'+
                      'Year ' + this.x +': Rate '+ this.y + '%';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 1
            },

                 credits: {
                position: { 
                   align: 'left',
                   x: 20,
                   y: -7
                },
                text: 'Uist Design Team',
                href: 'http://uist.edu.mk'
            },

            series: [{
                name: yserie[0],
                data: yvalues[0]
            }, {
                name: inflatserie,
                data: inflatdata
            }]
 });
    });

});

</script>


    </div>
   </div>

 <div id="container"style="min-width: 100px; height: 400px; margin: 0 auto"></div>

  </div>
</body>


    </div>
   </div>
</html>