построить javascript функцию обратного вызова из php для chartjs - PullRequest
Новая
       4

построить javascript функцию обратного вызова из php для chartjs

0 голосов
/ 11 февраля 2020

Я строю график на шаблоне с использованием диаграммы js, прекрасно работает, но у меток возникают проблемы с округлением и может показывать символ валюты, поэтому я обнаружил, что могу использовать функцию обратного вызова в подсказке.

Теперь я создаю javascript в массиве, используя php, а затем использую 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 -CAL lback

edit: просто подумал, что, возможно, смогу использовать заполнитель и поиск и замену, но есть ли другое решение?

спасибо

1 Ответ

0 голосов
/ 12 февраля 2020

Так что в итоге я заменил строку на «¬» и заменил ее функцией обратного вызова. Нет решений о том, как сделать это и поместить обратный вызов в объект, предоставленный сообществом.

...