CanvasJS图表移动端标题显示不全、标签字体过大适配问题求解

核心思路是通过视口宽度动态生成图表配置，避免固定数值导致的跨设备适配问题，具体修改如下：

1. 适配逻辑说明 #

• 标题maxWidth：不再固定为1000，移动端（可自定义阈值，示例取768px）下取视口宽度减去20px左右边距作为最大值，保证标题完全显示且自动换行；PC端仍保留1000的配置。
• 字体大小：标题、X/Y轴标签的字体大小同步根据视口宽度调整，移动端缩小字号避免溢出，PC端保留原有大小。

2. 修改后完整代码 #

import { Component } from 'react';
// 请保持你原有CanvasJSChart的引入路径不变
class BarChart extends Component {
  constructor() {
    super();
    this.chart = React.createRef();
    // 如需支持窗口缩放自动适配，可将视口宽度存在state中，搭配resize监听使用
    this.state = {
      viewportWidth: window.innerWidth
    };
  }

  componentDidMount() {
    // 窗口大小变化时更新视口宽度，触发重新渲染适配
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize = () => {
    this.setState({
      viewportWidth: window.innerWidth
    });
  }

  render() {
    const { viewportWidth } = this.state;
    const isMobile = viewportWidth < 768; // 移动端阈值可根据需求自行调整

    const options3 = {
      animationEnabled: true,
      theme: "light2",
      height: isMobile ? 400 : 600, // 也可同步调整图表高度适配移动端显示
      title:{
        text: this.props.t3,
        fontSize: isMobile ? 18 : 24,
        margin: isMobile ? 20 : 40,
        maxWidth: isMobile ? viewportWidth - 20 : 1000 // 核心适配：动态设置标题最大宽度
      },
      axisX: {
        labelMaxWidth: isMobile ? viewportWidth * 0.3 : 200,
        labelFontSize: isMobile ? 14 : 20,
      },
      axisY: {
        maximum: 100,
        minimum: 0,
        labelFontSize: isMobile ? 14 : 20,
      },
      data: [{
        type: "column",
        indexLabelPlacement: "inside",
        dataPoints: this.props.arr3
      }]
    }
    
    return (
      <div>
        <CanvasJSChart options = {options3} 
          onRef={ref => this.chart = ref} 
        />
      </div>
    );
  }
}
export default BarChart;

补充说明 #

如果不需要窗口缩放时实时适配，可以去掉resize相关的监听逻辑，直接在render里取window.innerWidth做判断即可，代码可以更精简。

内容的提问来源于stack exchange，提问作者user16304829