当我的数据在 php 中被计数或定义为数组时，我遇到问题。我的 Chart.js 脚本仅显示最后一个数据元素。当数据在脚本中定义如下时: data: [1,2, 3]，那么一切就OK了。但是我需要从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
}
?>
最佳答案
嘿，您可以使用以下代码来生成正确的折线图
您需要将 data:[] 替换为此数据:
<!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>
关于javascript - Chart.js 仅显示最后一个数据值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36810301/