Question

我想缩放雷达图中的标签，因为它在移动设备上变得非常歪斜和混乱，所以我在 ComponentDidMount()

const plugins = [{
    beforeDraw: function(c) {
        var chartHeight = c.chart.height;
        c.scale.pointLabels.fontSize = chartHeight * 6 / 100;
    }
}];

this.setState({ aggdata:data, options:options, plugins:plugins })

我将此插件附加到我的雷达图中，如下所示：

<Radar
    plugins={this.state.plugins}
    data={this.state.aggdata}
    options={this.state.options}
/>

这些是我的选择

const options = {
    responsive: true,
    maintainAspectRatio: false,
    scale: {
        gridLines: {
            color: "rgba(0, 0, 0, 0.3)"
        },
        angleLines: {
            color: "rgba(0, 0, 0, 0.3)"
        },
        pointLabels: {
            fontStyle: "bold",
            fontSize: "15"
        }
    }
};

但它不起作用，任何帮助或提示将不胜感激

编辑尝试：

render() {
        const show = this.state.render;
        if(show) {

        return ( <Radar  plugins={this.state.plugins} data={this.state.aggdata} options={this.state.options}/> )

        }
        else{
       return(<h3>Loading....</h3>)
        }

      
    }

Answer 1

因此假设您使用的是类组件，这是我的建议

class ExampleComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            shouldRender: false, 
        };
    }

    get options() {
        return {
            responsive: true,
            maintainAspectRatio: false,
            scale: {
                gridLines: {
                    color: "rgba(0, 0, 0, 0.3)"
                },
                angleLines: {
                    color: "rgba(0, 0, 0, 0.3)"
                },
                pointLabels: {
                    fontStyle: "bold",
                    fontSize: "15"
                }
            }
        }
    }

    get plugins() {
        return [{
            beforeDraw: function(c) {
                var chartHeight = c.chart.height;
                c.scale.pointLabels.fontSize = chartHeight * 6 / 100;
            }
        }];
    }

    componentDidMount() {
        const data = // ...your data
        this.setState({ data, loaded: true })
    }


    render() {
        const { data, loaded } = this.state;
        if (!loaded) return <h3>Loading....</h3>;

        return (
            <Radar
                data={data}
                plugins={this.plugins}
                options={this.options}
            />
        );
    }
}

我还没有尝试过这段代码，但我请你@aryan-agarwal 尝试一下，如果它给出任何错误，请评论

如何缩放标签大小雷达图 chart.js

1 个答案: