Вставка переменной массива для диаграммы CanvasJS - PullRequest
Новая
       7

Вставка переменной массива для диаграммы CanvasJS

0 голосов
/ 01 июля 2018

В настоящее время я работаю над сайтом для члена семьи, которому нужен простой калькулятор и график, чтобы согласиться с ним. У меня есть функция JavaScript, которая принимает 3 входа: Всего, процентная ставка и месяцы. Эти 3 переменные принимают пользовательские данные и вычисляют их, которые работают. поэтому я помещаю переменную total и переменную monthDisplay в массив (var investment = [];)

и вставка переменных в этот массив в цикле for

Я пытался использовать оповещение (инвестиции [2] [1]); просто чтобы увидеть, собираются ли данные в массив, который является

Что не работает, так это мой график. Я просто получаю пустой график без данных. я вставляю переменную неправильно? 

<!DOCTYPE html>
  <html>
  <body>

  <script type = "text/javascript" src ="https://canvasjs.com/assets/script/canvasjs.min.js" > </script> 
  <h2> Return of Investment Calculator </h2> 
  <label> Initial Investment: </label> <input id="amount" value="500" min="1">
  <label> Interest( % ): </label> <input id="ratePerMonth" value="3" min="1.0" Max="100.0"> 
  <label> Months: </label> <input id="numberOfMonths" value="3">

  <button onclick = "calculate()" > Calculate </button> 
  <p id="display"> </p>

  <script type = "text/javascript" >

  function calculate() {
    //Beginning of user input values
    amount = document.getElementById("amount").value; //obtain initial investment
    ratePerMonth = document.getElementById("ratePerMonth").value; // rate increase per month
    numberOfMonths = document.getElementById("numberOfMonths").value; // no. of months
    //End of user input values



    // Calculator Down Below
        var investment = [];
    var text = "";
    var month = new Date().getMonth();
    var monthHolder = Number(month + 1);

    var total = amount;
    var additionalRate = 0;
    for (var i = -1; i < numberOfMonths; i++) { //Start of loop for compound

      switch (monthHolder) { //switching getMonth function to literal strings
        case 1:
          monthDisplay = "January";
          break;
        case 2:
          monthDisplay = "February";
          break;
        case 3:
          monthDisplay = "March";
          break;
        case 4:
          monthDisplay = "April";
          break;
        case 5:
          monthDisplay = "May";
          break;
        case 6:
          monthDisplay = "June";
          break;
        case 7:
          monthDisplay = "July";
          break;
        case 8:
          monthDisplay = "August";
          break;
        case 9:
          monthDisplay = "September";
          break;
        case 10:
          monthDisplay = "October";
          break;
        case 11:
          monthDisplay = "November";
          break;
        case 12:
          monthDisplay = "December";
      };

      text += "Current Amount " + parseFloat(total).toFixed(2) + "Rate: " + ratePerMonth + "% Month: " + monthDisplay + "<br>";
      //inserting data

      investment.push([
        monthDisplay,total
      ]);
      //end of data insert
      additionalRate = total * ratePerMonth / 100;
      total = Number(additionalRate) + Number(total);

      if (monthHolder < 12) {
        monthHolder++;
      } else {
        monthHolder = 1;
      }
    }
    // chartInvestment.render();
    document.getElementById("display").innerHTML = text;
alert(investment[2][1]);

    var chart = new CanvasJS.Chart("chartContainer", {
      title: {
        text: "Investment Chart"
      },
      data: [{
        type: "line",
        datapoints: investment
      }]
    });
    chart.render();
  }

  </script>

  <div id = "chartContainer" style = "height: 300px; width: 100%;" ></div> 
  </body> 
  </html>

1 Ответ

0 голосов
/ 01 июля 2018

2 вещи:
1) Investment.push должен выдвинуть объект, не являющийся массивом:

investment.push ({ ярлык: monthDisplay, y: всего });

2) точки данных должны быть точками данных (это сложная задача)

...