如何正確顯示chart.js的數據？

我正在製作一個程序，它從一個數組中獲取一些數據並創建另一個數組。這另一個數組必須經由線圖chart.js之形象化，但不順心的事有...這是我的代碼：如何正確顯示chart.js的數據？

<html> 

<head> 
    <title>Visualize Data Beautifully Using JS Charts</title> 
    <link href="css/style.css" media="screen" rel="stylesheet"> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
</head> 

<body> 
    <center> 
     <form> 
      <p>First value:</p> 
      <input type="text" name="firstname" id="first"> 
      <br/>Last value: 
      <br/> 
      <input type="text" name="secondname" id="second"> 
      <br/> 
      <input type="submit" id="btnSubmit" value="Submit" /> 
     </form> 
    </center> 

    <script> 
     $(document).ready(function() { 
      $('#btnSubmit').on("click", function() { 
       var array = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; 
       var newArray = []; 
       var firstVal = $('#first').val(); 
       var lastVal = $('#second').val(); 

       for (var i = 0; i < array.length; i++) { 
        if (array[i] >= firstVal && array[i] <= lastVal) { 
         newArray.push(array[i]); 
        } 
       } 
       var ctx = $("#myChart").get(0).getContext("2d"); 

       for (var i = 0; i < newArray.length; i++) { 
        var data = { 

         labels: [1, 5, 8, 4, 5, 6, 7, 8, 9, 10], 

         datasets: [ 

          { 
           fillColor: "rgba(151,187,205,0.5)", 
           strokeColor: "rgba(151,187,205,1)", 
           pointColor: "rgba(151,187,205,1)", 
           pointStrokeColor: "#fff", 
           data: newArray[i] 
          } 
         ] 
        } 
       } 
       var myNewChart = new Chart(ctx).Line(data); 
      }); 
     }) 
    </script> 
    <div> 
     <section> 
      <article> 
       <canvas id="myChart" width="400" height="400"> 
       </canvas> 
      </article> 
     </section> 
    </div> 
</body> 

</html>

能否請你幫我，因爲我不知道在哪裏可能是代碼中的錯誤，我是新的jQuery和chart.js。

來源

2015-08-19 Veronica

您的按鈕有type="submit"。當你單擊它時，它會提交表單，有效地刷新它。它更改爲type="button"

<input type="button" id="btnSubmit" value="Submit" />

的data屬性用於dataset應該是一個數組。所以，你可以拿出外環和newArray

var ctx = $("#myChart").get(0).getContext("2d"); 
var data = { 
    labels: [1, 5, 8, 4, 5, 6, 7, 8, 9, 10], 
    datasets: [ 
     { 
      fillColor: "rgba(151,187,205,0.5)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      data: newArray 
     } 
    ] 
}

有了這些變化2直接插入，投入第一和最後一個值（比如20和60），將繪製圖表。

然而，IF你想要的數據與原始指數對齊（而不是被推到左），你應該在你的第一個循環中插入空值

if (array[i] >= firstVal && array[i] <= lastVal) { 
    newArray.push(array[i]); // Add to new array 
} 
else { 
    newArray.push(null); 
}

來源

2015-08-19 16:54:12 potatopeelings

非常感謝您對那個答案！現在它工作了！ – Veronica

如何正確顯示chart.js的數據？

回答

相關問題