登录  /  注册
将数据标签移动到饼图或圆环图之外 - Chart.js
P粉356128676
P粉356128676 2023-11-23 15:07:41
[CSS3讨论组]

我正在开发一个大型应用程序,将标签放置在图表本身之外的饼图或圆环图上会非常有帮助。

这个插件,outerLabels 正是我正在寻找的,但我无法让它输出任何内容。

我一直无法找到使用 Chart.js 完成此任务的方法,这就是我现在所坚持的方法。

我已经导入了插件 从'chartjs-plugin-outerlabels'导入{}; 也喜欢 import 'chartjs-plugin-outerlabels';

以下是我如何设置图表选项的示例:

function getPieChartOptions(chartTitle: string) {
    const options: ChartOptions = {
        responsive: true,
        plugins: {
            outerLabels: {
                fontNormalSize: 12,
                fontNormalFamily: 'sans-serif',
            },
            legend: {
                display: true,
                labels: {
                    usePointStyle: true,
                    font: {
                        family: 'sans-serif',
                        size: 12,
                    }
                }
            },
            title: {
                display: true,
                text: chartTitle,
                color: 'black',
                padding: 5,
                font: {
                    size: 16,
                    family: 'sans-serif',
                }
            },
            datalabels: {
                color: 'white',
                formatter: commas.format,
            }
        },
    };
    return options;
}

以下是项目本身内的圆环图示例:

如果有人可以帮助让这个插件正常工作,或者有其他解决方案来解决这个问题,我们将不胜感激!

P粉356128676
P粉356128676

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号