Question

我们目前正在使用客户温度计在完成支持票后对我们的客户进行调查。不幸的是，customerthermometers小部件的外观令人作呕。因此，我目前正在尝试使用Chart.js创建图表，并使用PHP从客户温度计的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>

Answer 1

$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)" )
);
...

使用Chart.js和PHP动态创建图表

1 个答案: