CanvasJS图表在使用flexbox时占据整行

Question

我目前在ReactJS完成的项目中使用CanvasJS for pie charts。完成对特定人的搜索后，我将绘制4个饼形图，以显示信息。我想使用Flexbox在多行上并排显示饼图（在空间允许的情况下）。

当前，当饼形图呈现时，每个CanvasJSChart都占据该行的整个宽度。在下面的图片中，您可以看到尽管每个饼图都占据了表格的1/3左右（“试用版”和“ Canvasjs.com”相对于饼图的位置并不固定，但可以移近（取决于容器的大小），则容器就是行的宽度。理想情况下，我希望每行包含2个饼图（但为了使应用程序在小屏幕上更好地工作，它并不固定）。

这是我的CSS部分。

.container {
  display:flex;
  flex-wrap: row wrap;
}

[当我没有flex-wrap: row wrap;线时，图表将分别占据较少的空间，并且全部保留在同一行：

因此，当我尝试使图表环绕时，我不确定为什么容器的大小会更改为整行。以下是呈现图表的代码（当我搜索名称时，该组件位于名为Accuracy的组件中：

class Contestant extends Component{
    constructor(props){
        super(props)
    }
    render(){
        var name = this.props.data[0];
        var data = this.props.data[1];
        let fjText = null
        let fj = null
        if (data.FJCorrect+data.FJIncorrect>0){
            fj = <Accuracy numberCorrect={data.FJCorrect} numberIncorrect={data.FJIncorrect}
            overallAccuracy = {data.FJAccuracy}/>
        }
        let tiebreak = null
        let tiebreakText = null 
        if (data.TiebreakCorrect+data.TiebreakIncorrect>0){
            tiebreak = <Accuracy numberCorrect={data.TiebreakCorrect} 
            numberIncorrect={data.TiebreakIncorrect}overallAccuracy = {data.TiebreakAccuracy} />
        }
        return(
            <div className = "container" >
                <Accuracy numberCorrect={data.numberCorrect} numberIncorrect={data.numberIncorrect}
                overallAccuracy = {data.overallAccuracy}/>

                <Accuracy numberCorrect={data.JCorrect} numberIncorrect={data.JIncorrect}
                overallAccuracy = {data.JAccuracy}/>

                <Accuracy numberCorrect={data.DJCorrect} numberIncorrect={data.DJIncorrect}
                overallAccuracy = {data.DJAccuracy}/>
                {fj}
                {tiebreak}
            </div>
        )
    }
}

export default Contestant

下面是呈现Contestant组件的代码：

class Search extends Component{
    constructor(){
        super()
        this.state = {search: "",
                    isLoading: true,
                    result: "",
                    searchType: null
                    };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
    }
    handleSearch(searchStr){
        //Takes in text and finds data of corresponding person
    }

    handleChange(event){
        //In case someone is searching for a new term, we have to reset search query type
        if (this.state.searchType !== null){
            this.setState({isLoading: true})
        }
        this.setState({search: event.target.value});
    }
    handleSubmit() {
        this.setState({isLoading: false, result: this.handleSearch(this.state.search)})
    }
    render(){
        return(
            <div>
                <input type="text" value={this.state.search} onChange={this.handleChange} placeholder={...} />
                <button type="submit" onClick={this.handleSubmit}>Search</button>
                {this.state.result.length === 0 ? null: <Contestant data={this.state.result}/>}
            </div>
        )
    }
}

export default Search

我的CanvasJS饼图具有链接网站上的默认设置（仅更改了数据点），因此我不确定为什么图表的大小根据是否包装Flexbox单元而改变。

class Accuracy extends Component{
    constructor(props){
        super(props)
    }
    render(){
        var correctAccuracy = ((this.props.overallAccuracy).toFixed(2)).toString()
        var incorrectAccuracy = ((100-this.props.overallAccuracy).toFixed(2)).toString()
        var options = { 
            animationEnabled: false,
            animationEnabled: true,
            animationDuration: 500,
            backgroundColor: "#F0F8FF",
            height: 260,
            data: [{
                type: "pie",
                startAngle: 300,
                toolTipContent: "{accuracy}%",
                indexLabelFontSize: 16,
                indexLabel: "{label}:{y}",
                dataPoints: [
                    { y: this.props.numberCorrect, label: "Correct", accuracy: correctAccuracy },
                    { y: this.props.numberIncorrect, label: "Incorrect", accuracy: incorrectAccuracy},
                ]
            }]
        }

        return (
            <CanvasJSChart options = {options}/>
        )
    }
}

export default Accuracy

任何帮助将不胜感激！我已经坚持了几天

Answer 1

从第一个屏幕截图看来，您的问题似乎是饼形图容器的宽度设置为100％。这意味着每个容器将是其父容器的100％，在本例中为.container div。您的CSS应该如下所示：

.container {
    display: flex;
    flex-wrap: row-wrap;
}

.piechart-container {
    width:50%;
}

当然，您需要在饼图容器div中添加“ piechart-container”类名。我没有尝试过，所以请告诉我它是否有效。您可能必须将宽度设置为略小于50％或更改max-width属性。代替width:50%，您可以执行flex:0 0 50%，这是一个flexbox项目属性，意思是“将初始宽度设置为50％，并且不允许任何增长或缩小。”

编辑：刚才看到您想要一些灵活性。您最好将容器的宽度设置为以像素而不是百分比为单位，这样，当屏幕变得足够小时，它们就会溢出为每行一张图表。我建议您查找“媒体查询”并设置CSS，这样，如果屏幕宽度低于某个数字，就会发生一组不同的属性（即，较小的图表，不同的环绕行为）