[从php为chartjs构建JavaScript回调函数

Question

[我正在使用chartjs在模板上构建图形，效果很好，但是标签存在取整问题，可以与显示货币符号有关，所以我发现可以在工具提示中使用回调函数。

现在我正在使用php在数组中创建javascript，然后使用json_encode构造图表数据，当我运行代码时，内容已呈现，但现在工具提示已消失。

数组构建的简化版本如下：

$dataSets             = array();

    $res                  = new stdClass();
    $res->label           = 'Client (paid)';
    $res->backgroundColor = $palette[0]->background_color;
    $res->stack           = 'Stack 0';
    $res->data            = array_values( $pi['client'] );
    $dataSets[0]          = $res;

    $title                = new stdClass();
    $title->display       = true;
    $title->text          = 'Invoices Breakdown';

    $callbacks            = new stdClass();
    $label                = new stdClass();

    $callbacks->label     = "
    function(tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label || '';

        if (label) {
            label += ': £';
        }
        label += Math.round(tooltipItem.yLabel * 100) / 100;
        return label;
    }";

    $tooltips             = new stdClass();
    $tooltips->mode       = 'index';
    $tooltips->intersect  = false;
    $tooltips->callbacks  = $callbacks;

    $scales               = new stdClass();

    $xAxes                = array();
    $x                    = new stdClass();
    $x->stacked           = true;
    $xAxes[]              = $x;
    $scales->xAxes        = $xAxes;

    $yAxes                = array();
    $y                    = new stdClass();
    $y->stacked           = true;
    $yAxes[]              = $y;
    $scales->yAxes        = $yAxes;

    $ds                   = new stdClass();
    $ds->type             = 'bar';

    $data                 = new stdClass();
    $data->labels         = $months;
    $data->datasets       = $dataSets;
    $ds->data             = $data;

    $options              = new stdClass();
    $options->title       = $title;
    $options->tooltips    = $tooltips;
    $options->responsive  = true;
    $options->scales      = $scales;
    $ds->options          = $options;

    return $ds;

因此可以看出，我以字符串形式插入了回调（工作版本没有$ callback对象）

我输出此对象的代码是这个：

$chart = json_encode( $dataset );
$html .= '
    <canvas id="invoiceChart" width="100" height="50"></canvas>
    <script>
        var ctx = document.getElementById("invoiceChart").getContext("2d");    
        var invoiceChart = new Chart(ctx, ' . $chart . ')
    </script>';

那么我将如何以这种方式插入回调函数？

呈现为$ chart的代码示例为：

<script>
        var ctx = document.getElementById("invoiceChart").getContext("2d");    
        var invoiceChart = new Chart(ctx, {"type":"bar","data":{"labels":["Sep","Oct","Nov","Dec","Jan","Feb"],"datasets":[{"label":"Client (paid)","backgroundColor":"#784187","stack":"Stack 0","data":[0,2,655,75,31.5,0]},{"label":"Client (auth)","backgroundColor":"#DDDDDD","stack":"Stack 0","data":[0,5.4,925,971.03,1227.703,402]},{"label":"Client (draft)","backgroundColor":"#003D51","stack":"Stack 0","data":[0,0,0,0,0,761.667]},{"label":"Contractor (paid)","backgroundColor":"#EA9A24","stack":"Stack 1","data":[0,166.505,9.99,0,81.93,0]},{"label":"Contractor (auth)","backgroundColor":"#E6194B","stack":"Stack 1","data":[0,0,261.451,0,2361.165,90.915]},{"label":"Contractor (draft)","backgroundColor":"#3CB44B","stack":"Stack 1","data":[0,5.4,0,0,239.71300000000002,252.77800000000002]}]},"options":{"title":{"display":true,"text":"Invoices Breakdown"},"tooltips":{"mode":"index","intersect":false,"callbacks":{"label":"\r\n    function(tooltipItem, data) {\r\n        var label = data.datasets[tooltipItem.datasetIndex].label || '';\r\n\r\n        if (label) {\r\n            label += ': \u00a3';\r\n        }\r\n        label += Math.round(tooltipItem.yLabel * 100) \/ 100;\r\n        return label;\r\n    }"}},"responsive":true,"scales":{"xAxes":[{"stacked":true}],"yAxes":[{"stacked":true}]}}})
    </script>

如您所见（毫不奇怪），回调函数被引号引起来（它是一个正确的字符串）

所以我该如何正确执行此操作？

https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#label-callback

编辑：只是以为我可能可以使用占位符并进行搜索和替换，但是还有其他解决方案吗？

谢谢

Answer 1

所以我最终将字符串替换为“¬¬”，然后将其替换为回调函数。没有关于如何执行此操作并将回调放入社区提供的对象的解决方案。