在canvas js中显示问题

Question

在下面的代码中，我将标题设置为一个很长的字符串。我希望它可以在某个部分之后转到下一行，我发现的解决方案是将宽度设置为最大宽度=1000。当它显示在电脑屏幕上时，它成功地进入了某一部分之后的下一行，但如果它显示在手机上，则无法显示标题的某一部分(因为最大宽度为1000(。第二个问题是手机屏幕上显示的标签太大，而电脑屏幕上的尺寸还可以。我该怎么办？

class BarChart extends Component {
constructor() {
super();
this.chart = React.createRef();
}
render() {
const options3 = {
animationEnabled: true,
theme: "light2",
height:600,
title:{
text: this.props.t3,
fontSize: 24,
margin: 40,

},
axisX: {
labelMaxWidth: 200,
labelFontSize: 20,

},
axisY: {
maximum: 100,
minimum: 0,
labelFontSize: 20,

// title: "Number of votes",
// interval: 5,
},
data: [{
type: "column",
indexLabelPlacement: "inside",
dataPoints: this.props.arr3

}]
}

return (
<div>

<CanvasJSChart options = {options3} 
onRef={ref => this.chart = ref} 

/>

{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
</div>
);
}}export default BarChart;

Answer 1

您可以使用window.innerWith查找屏幕的像素宽度，并使用state更新必要的属性，如标题的labelFontSize、fontSize和maxWidth。以这个stackBlitz为例。