如何修复Chart.js气泡内部填充问题

hivapdat  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(177)

How to fix this? chart.js 3.5.0
with small radius there are no padding
如何删除聊天内部填充?它显示当我有大气泡半径。
我试着在chart.js文档和堆栈溢出中搜索,但没有找到解决方案。不幸的是,气泡图上的Chart JS文档也严重缺乏。

options: {
                    animation: false,
                    onClick: (e, i) => {
                        if (i.length) {
                            const bubbleSelected = i[0];
                            wordsTopic = `Topic${bubbleSelected.datasetIndex + 1}`
                            aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:wordsTopic})
                        } else {
                            wordsTopic = `Default`
                            aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:wordsTopic})
                        }
                    },
                    onHover: (e, i) => {
                        if (i.length) {
                            const bubbleSelected = i[0];
                            if(wordsTopic !== `Topic${bubbleSelected.datasetIndex + 1}`){
                                aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:`Topic${bubbleSelected.datasetIndex + 1}`})
                            }
                        } else {
                            aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:wordsTopic})
                        }
                    },
                    aspectRatio: 1,
                    layout: {
                        padding: 0
                    },
                    layout: {
                        padding: 0
                    },
                    plugins: {
                        legend: {
                            display: false,
                        },
                        title: {
                            display: false,
                        },
                    },
                    scales: {
                        x: {
                            min: -0.25,
                            max: 0.25,
                            suggestedMin:-0.25,
                            suggestedMax:0.25,
                            ticks: {
                                color: '#fff',
                                padding: 0,
                            },
                            grid: {
                                borderColor: 'rgba(255, 255, 255, 0.2)',
                                color: function (context) {
                                    if (context.tick.value !== 0) {
                                        return 'transparent';
                                    }
                                    return 'rgba(78, 99, 102, 1)';
                                },
                            }
                        },
                        y: {
                            min: -0.25,
                            max: 0.25,
                            suggestedMin:-0.25,
                            suggestedMax:0.25,
                            ticks: {
                                color: '#fff',
                                padding: 0
                            },
                            grid: {
                                borderColor: 'rgba(255, 255, 255, 0.2)',
                                color: function (context) {
                                    if (context.tick.value !== 0) {
                                        return 'transparent';
                                    }
                                    return 'rgba(78, 99, 102, 1)';
                                },
                            }
                        }
                    }
                },
0kjbasz6

0kjbasz61#

我遇到了同样的问题,将此配置添加到图表的选项中为我解决了这个问题:

layout: {
  autoPadding: false,
},

可能还需要向轴添加一些内部填充,以覆盖最小值和最大值。

相关问题