PHP结合QuickChart：根据数据重要性动态调整折线图点半径

Timestamp      Value    Importance
5/22/2022 4:19  3245    0.0234
5/22/2022 4:09  3246    0.0214
5/22/2022 4:09  3247    0.1234
...

<?php

$rawData = [
    ['Timestamp' => '5/22/2022 4:19', 'Value' => 3245, 'Importance' => 0.0234],
    ['Timestamp' => '5/22/2022 4:09', 'Value' => 3246, 'Importance' => 0.0214],
    ['Timestamp' => '5/22/2022 4:09', 'Value' => 3247, 'Importance' => 0.1234],
    ['Timestamp' => '5/22/2022 3:59', 'Value' => 3248, 'Importance' => 0.0534],
    ['Timestamp' => '5/22/2022 3:59', 'Value' => 3249, 'Importance' => 0.1234],
    ['Timestamp' => '5/22/2022 3:49', 'Value' => 3250, 'Importance' => 0.0244],
    ['Timestamp' => '5/22/2022 3:49', 'Value' => 3251, 'Importance' => 0.4234],
    ['Timestamp' => '5/22/2022 3:39', 'Value' => 3252, 'Importance' => 0.0534],
    ['Timestamp' => '5/20/2022 3:39', 'Value' => 3253, 'Importance' => 0.0234], // Changed date for variety
    ['Timestamp' => '5/20/2022 3:29', 'Value' => 3254, 'Importance' => 0.4234],
    ['Timestamp' => '5/20/2022 3:29', 'Value' => 3255, 'Importance' => 0.8234],
    ['Timestamp' => '5/20/2022 3:19', 'Value' => 3256, 'Importance' => 0.1234],
    ['Timestamp' => '5/20/2022 3:19', 'Value' => 3257, 'Importance' => 0.0534],
    ['Timestamp' => '5/20/2022 3:09', 'Value' => 3258, 'Importance' => 0.0334],
    ['Timestamp' => '5/20/2022 3:09', 'Value' => 3259, 'Importance' => 0.0234],
    ['Timestamp' => '5/20/2022 2:59', 'Value' => 3260, 'Importance' => 0.0234],
];

$labels = [];
$values = [];
$importanceData = [];

foreach ($rawData as $row) {
    $labels[] = $row['Timestamp'];
    $values[] = $row['Value'];
    $importanceData[] = $row['Importance'];
}

// 注意：QuickChart要求JavaScript函数作为字符串传递
// 所以我们不能直接在PHP数组中定义JS函数，而需要先构建JS字符串
$pointRadiusFunction = <<<JS
function (context) {
    const index = context.dataIndex;
    // 访问我们自定义的 importanceData 数组
    const importance = context.dataset.importanceData[index];
    if (importance < 0.2) {
        return 0; // 隐藏重要性低于0.2的点
    }
    if (importance > 0.5) {
        return 8; // 重要性高于0.5的点显示较大半径
    }
    return 4; // 其他点显示默认半径
}
JS;

?>

<?php
// ... (接上面的PHP数据准备代码)

$chartConfig = [
    'type' => 'line',
    'data' => [
        'labels' => $labels,
        'datasets' => [
            [
                'label' => 'Value over Time',
                'data' => $values,
                'importanceData' => $importanceData, // 自定义属性，用于pointRadius计算
                'fill' => false,
                'backgroundColor' => 'rgb(75, 192, 192)',
                'borderColor' => 'rgb(75, 192, 192)',
                // pointRadius 将在 PHP 中作为字符串插入
                'pointHoverRadius' => 10, // 鼠标悬停时点半径
            ],
        ],
    ],
    'options' => [
        'responsive' => true,
        'title' => [
            'display' => true,
            'text' => '动态点半径的折线图 (根据重要性)',
        ],
        'scales' => [
            'xAxes' => [
                [
                    'type' => 'time',
                    'time' => [
                        'parser' => 'MM/DD/YYYY H:mm',
                        'tooltipFormat' => 'll HH:mm',
                        'unit' => 'minute',
                        'displayFormats' => [
                            'minute' => 'HH:mm',
                            'hour' => 'MMM D HH:mm',
                        ],
                    ],
                    'scaleLabel' => [
                        'display' => true,
                        'labelString' => '时间',
                    ],
                ],
            ],
            'yAxes' => [
                [
                    'scaleLabel' => [
                        'display' => true,
                        'labelString' => '值',
                    ],
                ],
            ],
        ],
        'legend' => [
            'display' => true,
            'position' => 'bottom',
        ],
    ],
];

// 将 pointRadius 函数字符串插入到配置中
// 由于 json_encode 无法直接处理JS函数，我们需要先将配置转为JSON字符串，
// 然后手动替换占位符或使用 QuickChart PHP 库的特殊处理方式
// 这里我们直接将函数作为字符串放在一个占位符中，稍后手动替换
$chartConfigJsonString = json_encode($chartConfig, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);

// 插入 pointRadius 函数
$chartConfigJsonString = str_replace(
    '"pointRadius": null', // 确保这个占位符不会与其它字符串冲突
    '"pointRadius": ' . $pointRadiusFunction,
    $chartConfigJsonString
);
// 这是一个简单的替换方式。更健壮的方式是先将 pointRadius 设为一个特殊字符串，然后替换。
// 或者，如果使用QuickChart PHP客户端库，它通常会处理JS函数字符串的插入。
// 为了演示，我们直接修改JSON字符串。
// 实际上，我们应该在 $chartConfig['data']['datasets'][0] 中直接添加一个 "pointRadiusPlaceholder" => "REPLACE_ME_WITH_FUNCTION"
// 然后替换这个占位符。

// 修正：更安全的插入方式是直接在PHP数组中预留一个标记，然后替换
$chartConfig['data']['datasets'][0]['pointRadius'] = '___POINT_RADIUS_FUNCTION___';
$chartConfigJsonString = json_encode($chartConfig, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
$chartConfigJsonString = str_replace('"___POINT_RADIUS_FUNCTION___"', $pointRadiusFunction, $chartConfigJsonString);

?>

<?php
// ... (接上面的PHP配置代码)

$quickChartUrl = 'https://quickchart.io/chart?c=' . urlencode($chartConfigJsonString) . '&width=800&height=400&format=png';

?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态点半径折线图</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        h1 { color: #333; }
        img { border: 1px solid #ddd; margin-top: 20px; }
        pre { background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>根据重要性动态调整点半径的折线图</h1>

    <p>以下是根据数据集中的“重要性”字段动态调整点半径的折线图。重要性低于0.2的点被隐藏。</p>

    <img src="<?php echo htmlspecialchars($quickChartUrl); ?>" alt="动态点半径折线图">

    <h2>生成的Chart.js配置 JSON</h2>
    <pre><?php echo htmlspecialchars(json_pretty_print($chartConfigJsonString)); ?></pre>

    <h2>PHP代码示例</h2>
    <pre><code><?php echo htmlspecialchars(file_get_contents(__FILE__)); ?></code></pre>

</body>
</html>

<?php
// 辅助函数，用于美化JSON输出
function json_pretty_print($json) {
    if (is_string($json)) {
        $json = json_decode($json);
    }
    return json_encode($json, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
}
?>