首页 > 解决方案 > consoleTVs charts 6.x add function in options

问题描述

I,m Laravel 5.8 and trying to build a chart with custom tooltips using Laravel Chart ( ConsoleTVs/Charts ) https://charts.erik.cat/ , I need to use functions inside the options but couldn't find the proper why to do so:

if i will use normal chartjs my code will be like so :

var ctx = document.getElementById("barChart").getContext('2d');
            var Total = eval(Amount.join('+')).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels:Labels,
                    datasets: [{
                        label: "Disbursements Total $" + Total,
                        backgroundColor: ["rgba(249, 57, 86, 1)", "rgba(146, 221, 161, 1)", "rgba(146, 186, 221, 1)", "rgba(200, 146, 221, 1)", "rgba(194, 221, 146, 1)", "rgba(221, 146, 146, 1)"],
                        data: Amount,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    legend: {
                        display: true,
                    },
                    tooltips: {
                        callbacks: {
                            label: function(value, context) {
                                var values = Number(value.yLabel)

                                return ' $' + values.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + " Disbursed of $" + Total + " in " + context.labels[value.index];;
                            }
                        }
                    },
                    plugins: {
                        datalabels: {
                            anchor: 'end',
                            align: 'top',
                            formatter: function(value, context) {
                                return '$' + value.replace(/\d(?=(\d{3})+\.)/g, '$&,');
                            },
                            display: function (context) {
                                return context.chart.isDatasetVisible(context.datasetIndex);
                            },
                            font: {
                                weight: 'bold'
                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true,
                                callback: function(value) {
                                    return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                                }
                            }
                        }]
                    }
                }
            });

But when using Laravel Charts

$chart = new TestChart;
        $chart->labels(['place1', 'place2', 'place3']);
        $chart->dataset('Disbursements Total $', 'bar', [1, 2, 3])
            ->backgroundcolor(collect(["rgba(249, 57, 86, 1)", "rgba(146, 221, 161, 1)", "rgba(146, 186, 221, 1)", "rgba(200, 146, 221, 1)", "rgba(194, 221, 146, 1)", "rgba(221, 146, 146, 1)"]))
            ->options([
                'tooltip' => [
                    'show' => true,
                    'callbacks' => [
                        'label' => function(value, context) {
                            ?
                        }

                    ]
// or false, depending on what you want.
                ]
            ]);

How can i add my function in a php array or better if there is a function in Laravel chart that can accept a json so i can copy my options as it is?

Please can someone help me :)

标签: javascriptphparrayslaravel-5chart.js

解决方案


推荐阅读