Question

我有一个问题，当我的数据被计算或在php中定义为数组时。我的chart.js脚本只显示最后一个数据元素。当数据在脚本中定义时如下：data: [1,2,3]，那么一切都还可以。但我需要从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>

<?php
  }

?>

Answer 1

嘿，您可以使用以下代码生成正确的折线图

您需要更换数据：[]到此数据：

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

Answer 2

json_decode在编码数组的末尾添加了一个[和]。从echo中删除它们：

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);?>
    }

Answer 3

jquery没有类型转换，所以我们必须将它作为这样的值传递。

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


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

Chart.js仅显示最后的数据值

3 个答案: