Javascript Chart.js仅显示最后一个数据值_Javascript_Php_Jquery_Chart.js

Javascript Chart.js仅显示最后一个数据值

javascript php jquery chart.js

Javascript Chart.js仅显示最后一个数据值,javascript,php,jquery,chart.js,Javascript,Php,Jquery,Chart.js,我有一个问题，当我的数据在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); ?

我有一个问题，当我的数据在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
  }

?>

$IncomeArray=数组（2462452432411239238236234 232 231229227 225 224222220 218216 215213 211209206202）；
?>
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
风险值数据={
标签：[“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”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[]
}
]
};
var myLineChart=新图表（ctx）.Line（数据）；

json\u decode在编码数组的末尾添加一个[and]。从回音中删除它们：

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

数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：
}

json\u decode在编码数组的末端添加一个[and]。将它们从回音中删除：

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

数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：
}

jquery没有类型转换，因此我们必须像这样将其作为值传递

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


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


数据：[]

jquery没有类型转换，因此我们必须像这样将其作为值传递

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


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


数据：[]

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

您需要将数据[]替换为此数据：

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


Chart.js |文档
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
风险值数据={
标签：[“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”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：
}
]
};
var myLineChart=新图表（ctx）.Line（数据）；

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

您需要将数据[]替换为此数据：

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


Chart.js |文档
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
风险值数据={
标签：[“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”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：
}
]
};
var myLineChart=新图表（ctx）.Line（数据）；