如何在Google Pie Chart的arrayToDataTable中嵌入HTML标签数据？

1. 提前在页面中准备翻译文本和数据节点 #

在Blade视图文件中，将Laravel的翻译结果存入JS变量（避免后续DOM查询），同时给统计值添加带唯一ID的<span>标签：

<script>
    // 将Laravel翻译结果预加载到JS变量中
    const chartTranslations = {
        purchaseDue: "{{ __('home.purchase_due') }}",
        expense: "{{ __('lang_v1.expense') }}"
        // 按需添加其他翻译标签
    };
</script>

<!-- 用于展示和存储统计值的DOM节点 -->
<div class="stats-boxes">
    <span id="purchase_due_amount">0</span>
    <span id="expense_amount">0</span>
</div>

2. 在AJAX函数中构建Chart数据并渲染 #

在update_statistics函数里，先通过AJAX获取数据，更新DOM节点，再组装成Google Chart需要的二维数组：

function update_statistics() {
    $.ajax({
        url: '/api/statistics', // 替换为你的实际数据接口
        method: 'GET',
        success: function(res) {
            // 更新页面上的统计值显示
            $('#purchase_due_amount').text(res.purchase_due);
            $('#expense_amount').text(res.expense);

            // 构建Google Pie Chart的数据源
            const chartData = google.visualization.arrayToDataTable([
                ['Category', 'Amount'],
                [chartTranslations.purchaseDue, parseFloat(res.purchase_due) || 0],
                [chartTranslations.expense, parseFloat(res.expense) || 0]
                // 其他统计项按相同格式追加
            ]);

            // 图表配置（按需调整）
            const chartOptions = {
                title: 'Financial Overview',
                pieSliceText: 'value',
                legend: 'right'
            };

            // 初始化并绘制图表
            const pieChart = new google.visualization.PieChart(document.getElementById('pie_chart_container'));
            pieChart.draw(chartData, chartOptions);
        },
        error: function() {
            console.log('Failed to load statistics data');
        }
    });
}

3. 直接读取DOM数据的替代方案 #

如果统计值是通过Laravel直接渲染到页面的（无需AJAX更新），可以直接从<span>标签中读取数值：

// 直接从DOM获取数据构建Chart数据源
const chartData = google.visualization.arrayToDataTable([
    ['Category', 'Amount'],
    [chartTranslations.purchaseDue, parseFloat($('#purchase_due_amount').text()) || 0],
    [chartTranslations.expense, parseFloat($('#expense_amount').text()) || 0]
]);

关键注意点 #

• 确保Blade模板语法{{ __('xxx') }}在页面渲染时已被解析为最终的翻译文本，不要将未解析的模板语法直接留在JS代码中。
• 数值必须转换为Number类型（用parseFloat/parseInt），Google Chart的arrayToDataTable对数据类型有严格要求，字符串类型会导致图表无法正常渲染。
• 若翻译文本包含特殊字符，Laravel的__()函数会自动处理转义，确保在JS中能正常显示。

内容的提问来源于stack exchange，提问作者user19778377