laravel dcat-admin 图表统计 Apexchart 整数显示2位小数点

stars1314 的个人博客 / 22 / 2 / 创建于 1年前 / 更新于 1年前

Dcat Admin 引入了 apexcharts 图表功能，通过 Dcat\Admin\Widgets\ApexCharts\Chart 这个类可以帮助开发者快速渲染图表。

Apexchart 做统计界面发现一个问题，数据全是整数，但是还显示小数点，如下图：

网上很少有答案，自己研究了很久，分享下经验

第一种方案重新 buildDefaultScript 方法

    protected function buildDefaultScript()
    {
        $options = JavaScript::format($this->options);

        return <<<JS
(function () {
    var options = {$options};
    // 如果是小数的话，Y轴会被强制设置成2位小数， 这里改写Y轴的小数设置，
    // 注意options.yaxis.labels = { formatter: (value) => { return value }} 这种写法也是不生效
    options.yaxis =
      {
          labels: {
               formatter: (value) => { return value },
          }
      };
    var chart = new ApexCharts(
        $("{$this->containerSelector}")[0],
        options
    );
    chart.render();
})();
JS;

第 2 种方案：

在图表配置加入可执行的 JS 代码

  $this->option(
            'yaxis.labels.formatter',
            JavaScript::make("(value) => { return value }")  //  这个值最后段代码会作为JS代码执行
        );

可以自己封装一个方法继承 Chat 然后在调用

    /**
     * 设置Y轴数据栏显示显示
     * 如果是小数的话，Y轴会被强制设置成2位小数， 这里改写Y轴的小数设置
     * @return void
     */
    public function yaxisLabelsFormatter() {
        $this->option(
            'yaxis.labels.formatter',
            JavaScript::make("(value) => { return value }")  //  这个值最后段代码会作为JS代码执行
        );
    }

改写后效果如下：

PS：推荐使用第 2 种方案。配置灵活

dcat-admin 参考文档：
图表《Dcat Admin 中文文档》

本作品采用《CC 协议》，转载必须注明作者和本文链接

9 声望

暂无个人描述~

《L02 从零构建论坛系统》

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

《L01 基础入门》

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

推荐文章：

更多推荐...

花了四个月打磨的 Laravel Plus 开源 29 / 96 |

试用 Laravel + 树莓派搭建视频监控，并支持线上访问 25 / 19 |

在laravel下实现全双工的websocket开发 21 / 8 |

无需修改任何代码和扩展将你的Laravel项目性能提高20倍 99 / 98 |

Laravel 实用小技巧——缓存标签的小秘密（下） 12 / 11 |

Laravel 实用小技巧——缓存标签的小秘密（上） 16 / 6 |

讨论数量: 2

辣条拌鱼翅

课程读者 3 声望

补充下，我需要的是显示千分位。使用文章中的方案 2.

...
use Dcat\Admin\Support\JavaScript;
...
$this->options([
....
            'yaxis' => [
                'title' => [
                    'text' => 'Value',  // Y轴标题
                ],
                'labels' => [
                    'formatter' => JavaScript::make("(value) => { return value.toLocaleString() }")
                ]
            ],
]);
....

6个月前评论

YangMd

0 声望

你好楼主我这里碰到个问题，就是折线图类别我想在初始化时部分不显示，让用户自己点击展示，这部分参数是哪个

2周前评论

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

帮助

未填写

私信

文章归档

1 篇 2023 年 8 月 1 篇 2023 年 5 月

1年前 Mysql 中 json、JsonArray 类型字段中指定属性的模糊查询问题 1年前 laravel dcat-admin 图表统计 Apexchart 整数显示2位小数点

1 laravel dcat-admin 图表统计 Apexchart 整数显示2位小数点 0 Mysql 中 json、JsonArray 类型字段中指定属性的模糊查询问题

成为赞助商