最後のデータ値のみを表示しているChart.js

php.Myのchart.jsスクリプトでデータがカウントされたり、配列として定義されているときに問題が発生しました。最後のデータ要素が表示されます。データがdata: [1,2,3]、そして、すべては私が必要ok.ButあるPHPからデータを取得最後のデータ値のみを表示しているChart.js

$IncomeArray=array(246, 245, 243, 241, 239, 238, 236, 234, 232, 231, 229, 227, 225, 224, 222, 220, 218, 216, 215, 213, 211, 209, 208, 206, 204, 202); 
?> 

<script type="text/javascript"> 
var ctx = document.getElementById("myChart").getContext("2d"); 

var data = { 
     labels: ["2016", "2017", "2018", "2019", "2020", "2021", "2022","2023", "2024", "2025", "2026", "2027", "2028", "2029","2030", "2031", "2032", "2033", "2034", "2035", "2036","2037", "2038", "2039", "2040", "2041"], 

    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data:[<?php echo json_encode($IncomeArray);?>] 
     } 
      ] 
}; 
var myLineChart = new Chart(ctx).Line(data); 
</script> 

<?php 
    } 

?>

出典

2016-04-23 Darius92

json_decodeは、エンコードされた配列の端部に追加の[と]を置きます。エコーからそれらを削除してください：

datasets: [ 
    { 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.2)", 
     strokeColor: "rgba(220,220,220,1)", 
     pointColor: "rgba(220,220,220,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data:<?php echo json_encode($IncomeArray);?> 
    }

出典

2016-04-23 12:01:32 Roda

おかげで、。 – Darius92

jqueryはこのような値として渡す必要があります。

<?php $tot = count($IncomeArray); ?> 


data: [<?php for($j=0;$j<=$tot;$j++){ if($j<$tot) { echo "".$IncomeArray[$j].","; } else { echo "".$IncomeArray[$j].""; } } ?>]

出典

2016-04-23 12:16:25 JYoThI

適切な折れ線グラフを生成するために、ちょっとあなたは、次のコードを使用することができます交換する

あなたの必要性は、データです：[]このデータに：今では正常に動作している

   <!doctype html> 
       <html> 
        <head> 
         <title>Chart.js | Documentation</title> 
         <!-- <link rel="stylesheet" type="text/css" href="/assets/docs.css"> --> 
         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimal-ui"> 

           <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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 

        </head> 

         <body> 
        <canvas id="myChart" width="800" height="250"></canvas> 
       </body> 


       <?php 
       $IncomeArray=array(246, 245, 243, 241, 239, 238, 236, 234, 232, 231, 229, 227, 225, 224, 222, 220, 218, 216, 215, 213, 211, 209, 208, 206, 204, 202); 
       ?> 

       <script type="text/javascript"> 
       var ctx = document.getElementById("myChart").getContext("2d"); 

       var data = { 
         labels: ["2016", "2017", "2018", "2019", "2020", "2021", "2022","2023", "2024", "2025", "2026", "2027", "2028", "2029","2030", "2031", "2032", "2033", "2034", "2035", "2036","2037", "2038", "2039", "2040", "2041"], 

        datasets: [ 
         { 
          label: "My First dataset", 
          fillColor: "rgba(220,220,220,0.2)", 
          strokeColor: "rgba(220,220,220,1)", 
          pointColor: "rgba(220,220,220,1)", 
          pointStrokeColor: "#fff", 
          pointHighlightFill: "#fff", 
          pointHighlightStroke: "rgba(220,220,220,1)", 
          data:<?php echo json_encode($IncomeArray);?> 
         } 
          ] 
       }; 
       var myLineChart = new Chart(ctx).Line(data); 
       </script> 


       </html>

出典

2016-04-23 12:24:19

最後のデータ値のみを表示しているChart.js

答えて

関連する問題