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

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 中。我没有尝试过，所以让我知道它是否有效。您可能必须将宽度设置为略小于 50% 或更改 max-width 属性。您可以使用 flex:0 0 50% 代替 width:50%，这是一个 flexbox 项目属性，意思是“将初始宽度设置为 50%，并且不允许任何增长或收缩。”

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