Question

我有这个图表元素

<canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>

我有这个脚本来插入数据

<script>
        
            function hour(){
             
            return a=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00",
                "11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00",
                "19:00","20:00","21:00","22:00","23:00"];
         };
         
        var data_visitors_present=<?php echo json_encode(visitorsPresentDay()[0]);?>;
        var data_visitors_previous=<?php echo json_encode(visitorPreviousDay()[0]);?>;
	var lineChartData = {
			labels : hour(),
			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 : data_visitors_previous
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(48, 164, 255, 0.2)",
					strokeColor : "rgba(48, 164, 255, 1)",
					pointColor : "rgba(48, 164, 255, 1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(48, 164, 255, 1)",
					data : data_visitors_present
				}
			]

		}
    
        </script>

最终结果是这样的 enter image description here

我希望每10秒钟只重新加载图表元素; 我写这个没有效果..

<script>
        var chart=document.getElementById('#line-chart');
        setInterval(chart){(
            function hour(){
             
            return a=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00",
                "11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00",
                "19:00","20:00","21:00","22:00","23:00"];
         };
         
        var data_visitors_present=<?php echo json_encode(visitorsPresentDay()[0]);?>;
        var data_visitors_previous=<?php echo json_encode(visitorPreviousDay()[0]);?>;
	var lineChartData = {
			labels : hour(),
			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 : data_visitors_previous
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(48, 164, 255, 0.2)",
					strokeColor : "rgba(48, 164, 255, 1)",
					pointColor : "rgba(48, 164, 255, 1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(48, 164, 255, 1)",
					data : data_visitors_present
				}
			]

		}
            }1000);
        </script>

我怎么能解决它？

Answer 1

您尝试拨打setInterval的方式似乎有些奇怪。第一个参数应该是一个函数，您没有这样做。（http://www.w3schools.com/jsref/met_win_setinterval.asp）

尝试更改脚本代码中的以下内容：

function hour(){
     return a=["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00","14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"];
};

setInterval(function() {
    var chart=document.getElementById('#line-chart');
    var data_visitors_present=<?php echo json_encode(visitorsPresentDay()[0]);?>;
    var data_visitors_previous=<?php echo json_encode(visitorPreviousDay()[0]);?>;
    var lineChartData = {
        labels : hour(),
        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 : data_visitors_previous
            },
            {
                label: "My Second dataset",
                fillColor : "rgba(48, 164, 255, 0.2)",
                strokeColor : "rgba(48, 164, 255, 1)",
                pointColor : "rgba(48, 164, 255, 1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(48, 164, 255, 1)",
                data : data_visitors_present
            }
        ]

    }
},1000);

如果您希望数据实际更改，您还需要更改从php加载数据的方式。一个可能的建议是创建一个php页面，运行你的php函数（visitorsPresentData()和visitorPreviousDay()）并回显到屏幕，然后通过setInterval函数中的ajax检索结果。

在我看来，您实际上并未将lineChartData写入图表？也可能是该代码中的错误。

仅重新加载线路图

1 个答案: