Reactjs 如何使数据标签适合于条形图
我使用react-chartjs-2创建条形图。我面临的问题是数据标签。数据标签显示在每个栏中。在正常显示中,它们安装在条内。但当屏幕大小增加到140%以上时,数据标签就会从条中溢出。我试着遵循几个解决方案,但没有任何帮助 请参见所附的屏幕截图: 这是我的密码:Reactjs 如何使数据标签适合于条形图,reactjs,react-chartjs,Reactjs,React Chartjs,我使用react-chartjs-2创建条形图。我面临的问题是数据标签。数据标签显示在每个栏中。在正常显示中,它们安装在条内。但当屏幕大小增加到140%以上时,数据标签就会从条中溢出。我试着遵循几个解决方案,但没有任何帮助 请参见所附的屏幕截图: 这是我的密码: let test= []; let max= []; let minmalvalue; this.props.chartData.datasets.map((item)=>{ if(item.
let test= [];
let max= [];
let minmalvalue;
this.props.chartData.datasets.map((item)=>{
if(item.label != "% Coverage")
test = test.concat(item.data);
max = test.reduce(function(a, b) {
return Math.max(a, b);
});
});
minmalvalue = 0.03*max;
let finalvalue=Math.round(minmalvalue);
finalvalue=finalvalue+1;
console.log(finalvalue);
let options = {
tooltips: {
enabled: true
},
scales: {
xAxes: [{
barPercentage: 0.8,
categoryPercentage: 0.7,
stacked: true,
gridLines: {
display:false
}
}],
yAxes: [
{
id: 'y-axis-1',
stacked: true,
display: true,
position: 'left',
gridLines: {
display:false
}
},
{
id: 'y-axis-2',
stacked: true,
display: true,
position: 'right',
ticks: {
min: 0,
max: 100,
callback: function (value) {return value + "%";}
},
gridLines: {
display:false
}
}
]
},
legend: {
display: true,
labels: {
fontColor: "#000000"
}
},
plugins: {
datalabels: {
display: function(context) {
return (context.dataset.data[context.dataIndex] !== 0 && context.dataset.data[context.dataIndex] !== "0" && context.dataset.data[context.dataIndex] >= finalvalue); // or >= 1 or ...
},
color: 'black',
align: 'bottom',
anchor: 'bottom',
padding:'0px',
font: {
weight: 'bold',
size :15
},
formatter: function (datasets, data) {
if(datasets === 0 || datasets === "0") {
return;
}
if(data.dataset.label === "% Coverage"){
console.log("datasets", datasets);
return datasets + "%";
}
}
}
}
};
我想把数据标签放在条里面。即使在放大/缩小的情况下,也不应超出条形图的边界