Question

我一直在为我的大项目苦苦挣扎，但多亏了你在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

  });
 });
});

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

根据提供的样本数据绘制第一行
根据提供的数学公式
用户输入第一行的值
图表绘制第一行
图表根据提供的公式（这是我的问题）自动绘制第二行

我无法弄清楚我的错误在哪里，一切正常...... 2个样本成功绘制，输入的值（第1行）也成功绘制，但是当我需要计算它们时对于第二行，他们不想出现在图表上：/

以下是HTML的完整代码 http://jsfiddle.net/Avramoski/LsTet/2/

这是我想要的样子...... http://imagizer.imageshack.us/v2/800x600q90/17/tbjm.png

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

Answer 1

我是plotvar.com的网站管理员。我很高兴听到你将它用于你的折线图制作代码;）

你并没有真正正确使用getSeries和getParams函数。这些函数用于处理倍数系列（从url中检索）。

无论如何，我已经为你准备了一小段工作代码。

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

    <!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>

希望这有帮助。

对于您的信息，我的网站上还有一个“秘密”equation line graph tool，也许它也有帮助。

在折线图中绘制线条，其中包含从textarea获取的值

1 个答案: