[英]React chart : prevent chart's canvas scaling with height and width
我正在使用 react-chart-js 中的水平条( https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/HorizontalBar.js )如下,
const data = {
label: ["graph"],
datasets: [
{
label: "A",
backgroundColor: "red",
data: [50],
},
{
label: "B",
backgroundColor: "yellow",
data: [10],
},
],
};
const chartOptions = {
scales: {
xAxes: [
{
stacked: true,
barPercentage: 0.2,
},
],
yAxes: [
{
stacked: true,
barPercentage: 0.2,
},
],
},
};
和
<div>
<HorizontalBar data={data} options={chartOptions}/>
</div>
我尝试直接在 div 或水平条上应用高度以限制 canvas 的放大,但它仍然无法解决。 是否可以分别为图表的 canvas 提供高度和宽度。
尝试在您的选项 object 中设置responsive: false
。 这应该根据文档使 canvas 不会调整大小( https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options )
在我的情况下,设置maintainAspectRatio:false
以及在 div 上提供高度/宽度
<div style={{height:'100px',width:'200px'}}>
<HorizontalBar data={data} options={chartOptions}/>
</div>
有助于限制画布的可伸缩性。
相关来源: https://www.chartjs.org/docs/latest/general/responsive.html#important-note
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.