我正在使用带有React Package 器(react-chartjs-2
)的Chart.js。我想升级到Chart.js的最新主版本(3.x),以消除对moment
的依赖,以及其他好处。3.x中有很多突破性的更改,我已经通过所有突破性的更改使 * 几乎 * 所有东西都恢复了工作,除了这一个令人恼火的小东西。
整个图表周围有一个白色的小边框,我怎么也摆脱不掉。奇怪的是,当图表的数据发生变化时,它会消失,并导致重新呈现。它看起来像这样:
它应该是这样的(无缝地消失在页面上的下一个div中):
可能是options
中的一行需要修改,但我不知道应该是哪一行。我想可能是scale.[id].grid.zeroLineColor
,因为3.x upgrade guide是这样写的:“scales.[x/y]Axes.zeroLine* 轴的选项被删除。请使用可脚本化的缩放选项。”但我使用如下可脚本化的选项设置color
:
grid: {
color: () => "transparent"
}
这只是解决了部分问题。因为现在“零线”不是灰色的,但在整个图表的底部和右侧,似乎仍然有1 px的填充或其他东西。
我已经设置了我能想到的所有其他属性。
下面是options
目前的情况:
const options = {
hover: { intersect: false },
borderWidth: 0,
clip: 0,
plugins: {
legend: {
position: "bottom",
align: "center",
display: false,
},
tooltip: {
intersect: false,
mode: "index",
callbacks: {
//This removes the tooltip title
// title: function () {},
label: ({ raw }) => {
return `$${formatNumber(raw)}`;
},
},
//this removes legend color
displayColors: false,
padding: 15,
position: "average",
pointHitRadius: 20,
pointRadius: 30,
caretSize: 10,
backgroundColor: "rgba(255,255,255,.9)",
borderColor: rgbaStringFromRGBObj(palette.Vibrant.rgb, 0.35),
borderWidth: 2,
bodyFont: {
family: "Satoshi",
size: 18,
},
bodyColor: "#303030",
titleFont: {
family: "Satoshi",
},
titleColor: "rgba(0,0,0,0.6)",
},
},
scales: {
y: {
ticks: {
backdropPadding: 0,
display: false,
},
stacked: false,
grid: {
drawBorder: false,
borderWidth: 0,
drawTicks: false,
color: "transparent",
width: 0,
},
drawBorder: false,
drawTicks: false,
},
x: {
padding: 0,
ticks: {
display: false,
padding: 0,
mirror: true,
backdropPadding: 0,
},
grid: {
drawBorder: false,
drawTicks: false,
display: false,
},
drawBorder: false,
drawTicks: false,
},
},
maintainAspectRatio: false,
}
这是一个包含上下文中所有代码的pull请求。
1条答案
按热度按时间llmtgqce1#
当
responsive
在图表选项中设置为true
时,我遇到了这个问题,因为图表假定的宽度和高度设置为“1”位-它不包括小数。例如:与
ChartJS呈现的画布忽略了其父 Package 器的小数级特性......无论是错误还是设计。
解决方案
在我的例子中,前面提到的bug导致了图表底部的一条小白色。
我通过将父级的样式设置为
display: flex;
并使用flex-direction: column;
和justify-content: flex-end
将图表调整到末尾来解决这个问题。由于图表比父级略短,因此将其调整到父级 Package 的末尾(底部)有效地“删除”了白色。一般情况:在了解图表的宽度/高度可能比其父级小几分之一像素的情况下,尝试定位图表。