dcat 使用图表,'legend.formatter',设置不生效

目标结果:
链接:apexcharts.com/javascript-chart-de...
dcat 使用图表,'legend.formatter',设置不生效

现在的情况:

dcat 使用图表,'legend.formatter',设置不生效

代码:

 $this->option(
            'legend.formatter',
            // 这个值最后段代码会作为JS代码执行
            JavaScript::make('function (seriesName, opts) { return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]; }')
//            JavaScript::make('function () { return 20 }')
        );

注释那行return 20 也不生效
其他配置:

  $this->options([
            'chart'       => [
                'type'   => 'radialBar',
                'height' => 600,
            ],
            'plotOptions' => [
                'radialBar' => [
                    'offsetY'    => 0,
                    'startAngle' => 0,
                    'endAngle'   => 270,
                    'hollow'     => [
                        'margin'     => 5,
                        'size'       => '30%',
                        'background' => 'transparent',
                    ],
                    'dataLabels' => [
                        'name'  => [
                            'show' => false,
                        ],
                        'value' => [
                            'show' => false,
                        ]
                    ]
                ]
            ],
            'colors'      => ['#1ab7ea', '#0084ff', '#39539E', '#0077B5', '#123EAB'],
            'legend'      => [
                'show'       => true,
                'floating'   => true,
                'fontSize'   => '16px',
                'position'   => 'left',
                'offsetX'    => '160',
                'offsetY'    => '15',
                'labels'     => [
                    'useSeriesColors' => true,
                ],
                'markers'    => [
                    'size' => 0,
                ],
                'itemMargin' => [
                    'vertical' => 3,
                ],
            ],

            'responsive' => [[
                'breakpoint' => 480,
                'options'    => [
                    'legend' => [
                        'show' => false
                    ]
                ],
            ]],
        ]);

打印结果:

dcat 使用图表,'legend.formatter',设置不生效


问题已解决:
挠头了好久,怎么看配置都没问题。
在下面的代码中console了一下,值竟然是正确的。这都没问题我就更挠头了

$this->option(
            'legend.formatter',
            // 这个值最后段代码会作为JS代码执行
            JavaScript::make('function(a, b) {
            console.log( b.w.globals.series[b.seriesIndex]);
            return a + ":  " + b.w.globals.series[b.seriesIndex]
          }')
        );

最后再看代码,看到显示位置的时候脑袋一闪,把这两行注释掉,出来了!!!原来是照着官方文档写的字符串’0’,这里要改成数字,最后再根据实际情况调整下位置
dcat 使用图表,'legend.formatter',设置不生效

最终效果图:

dcat 使用图表,'legend.formatter',设置不生效

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1

这个应该和我遇到的类似问题, 参考这个 博客:laravel dcat-admin 图表统计 Apexchart 整数显示2位小数点 设置看看

9个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!