在 canvas js 中显示问题

Question

现在在下面的代码中，我将标题设置为一个很长的字符串。我希望它可以在某个部分后进入下一行我找到的解决方案是将宽度设置为max width = 1000。当它在电脑屏幕上显示时，它在某个部分后成功进入下一行，但是如果显示在phone上，标题的某部分显示不出来（因为最大宽度是1000）。第二个问题是手机phone屏幕上显示的标签太大了，电脑屏幕上大小还可以。我该怎么办？

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 to find the pixel width of the screen and use states to update the necessary properties like labelFontSize, fontSize and maxWidth。看看这个 stackBlitz 的例子。

在 canvas js 中显示问题

display problems in canvas js

javascript

node.js

reactjs

canvasjs