javascript - 使用 Chart.js 和 PHP 动态创建图表
问题描述
我们目前正在使用客户温度计在完成支持票后调查我们的客户。不幸的是,customerthermometers 小部件看起来很恶心。所以我目前正在尝试使用 Chart.js 创建一个图表,并使用 PHP 从 customerthermometers 的 API 动态获取数据。
图表中考虑了 PHP 数组 ($dataPoints) 中的所有部分,“数据”除外,我真的不知道如何进一步处理。
<?php
$gold = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=1' );
$green = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=2' );
$yellow = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=3' );
$red = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=4' );
$dataPoints = array(
array( "label" => "Gold Star" , "data" => $gold , "backgroundColor" => "rgba(255,215,0,1)"),
array( "label" => "Green Light" , "data" => $green , "backgroundColor" => "rgba(0,128,0,1)"),
array( "label" => "Yellow Light" , "data" => $yellow , "backgroundColor" => "rgba(255,255,0,1)"),
array( "label" => "Red Light" , "data" => $red , "backgroundColor" => "rgba(255,0,0,1)" )
);
?>
<html>
<head>
<meta charset="utf-8">
<title>Chart Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../assets/chart28/dist/Chart.js"></script>
<canvas id="myChart" width="100" height="20"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Gold Star', 'Green Light', 'Yellow Light', 'Red Light'],
datasets: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
<?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
</body>
</html>
编辑:
$dataPoints
[{"label":"Gold Star","data":4,"backgroundColor":"rgba(255,215,0,1)"},{"label":"Green Light","data":2,"backgroundColor":"rgba(0,128,0,1)"},{"label":"Yellow Light","data":0,"backgroundColor":"rgba(255,255,0,1)"},{"label":"Red Light","data":0,"backgroundColor":"rgba(255,0,0,1)"}]
我还尝试在 中静态设置以下值datasets
,这有效并给了我想要的结果:
datasets: [{
data: [ 4 , 2 , 0 , 0 ],
backgroundColor: [
"rgba(255,215,0,1)",
"rgba(0,128,0,1)",
"rgba(255,255,0,1)",
"rgba(255,0,0,1)"
]
}]
工作代码(感谢@Camille):
<?php
$gold = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=1' );
$green = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=2' );
$yellow = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=3' );
$red = file_get_contents( 'https://app.customerthermometer.com/api.php?apiKey=<api_key>&getMethod=getNumResponsesValue&temperatureID=4' );
$dataPoints = array(
array( "data" => array($gold) , "label" => "Gold Star" , "backgroundColor" => "rgba(255,215,0,1)"),
array( "data" => array($green) , "label" => "Green Light" , "backgroundColor" => "rgba(0,128,0,1)"),
array( "data" => array($yellow) , "label" => "Yellow Light" , "backgroundColor" => "rgba(255,255,0,1)"),
array( "data" => array($red) , "label" => "Red Light" , "backgroundColor" => "rgba(255,0,0,1)" )
);
?>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../assets/chart28/dist/Chart.js"></script>
<canvas id="myChart" width="100" height="20"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Customer Thermometer'],
datasets: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
}
}
});
</script>
</body>
</html>
解决方案
的数据属性$dataPoints
应该是一个数组。如果你得到一个值,你必须转换它
...
$dataPoints = array(
array( "label" => "Gold Star" , "data" => array($gold) , "backgroundColor" => "rgba(255,215,0,1)"),
array( "label" => "Green Light" , "data" => array($green) , "backgroundColor" => "rgba(0,128,0,1)"),
array( "label" => "Yellow Light" , "data" => array($yellow) , "backgroundColor" => "rgba(255,255,0,1)"),
array( "label" => "Red Light" , "data" => array($red) , "backgroundColor" => "rgba(255,0,0,1)" )
);
...
推荐阅读
- python - google or-tools 无法获得最佳 LP 结果,如 gurobi 示例
- c# - Visual Studio 将自动对以下项目进行功能更改以打开它们
- javascript - 编写 JavaScript 时缺少 Visual Studio 的 IntelliSense
- python - 在 Python 中循环一个函数
- excel - 将分隔文本转换为 csv
- java - 我可以在构建它的 CellValueFactory 时检查 TableCell 的内容是否会溢出
- wpf - 文本块问题上的圆形边框
- angular - Angular:当计数器变量值为0时调用方法
- vb.net - 双重转义转义 - 使用字节
- excel - 如何仅通过可见选项卡运行代码?