如何设计响应式Web设计的元素?

我已经使用charlist.js创建了饼图,我无法创建响应式Web设计。当我减小窗口大小时,即对于小窗口,图例应位于饼图上方,对于大窗口,图例应位于右侧。因此,对于大尺寸,它是有效的,但对于小屏幕尺寸,图例是重叠的压电图。如何设置图例的样式,以便小屏幕的图例将位于饼图上方,而不是重叠的饼图。

注意:我已经创建了作为反应组件的piechart。

图表图例文档: https://github.com/codeyellowbv/chartrist-plugin-legend/blob/master/index.html

代码:

反应组件,即饼图:

import react,component from'react';

VaR选项={
宽度:200,
高度:200,
ShowLabel:错误,
Stackbars:正确,
插件:[
CharList.Plugins.Legend()。
]
}(二)

类饼图扩展组件{

建造师(道具){
超级(道具);
}
常量数据={
标签:标签,
系列:解雇
}(二)


this.pie chart=new charist.pie(“.ct饼图”,数据,选项);

}

呈现()。{
返回(
<DIV classname=“row”>
<DIV classname=“col-12 col-sm-6 col-lg-8”>
<div classname=“ct饼图”>
这个。请看
</DIV>
</DIV>
</DIV>
)}
}

导出默认饼图;
CSS文件:

.ct饼图.ct图例li.inactive:before{
背景:透明;
}

.piechart标题{
文本对齐:居中;
}

.ct饼图.ct图例{
位置:绝对;
左侧填充:80px;
}

.ct饼图.ct-legend.ct-legend-inside li{
显示:块;
边距:0;
}
屏幕截图(适用于小屏幕和大屏幕):





我添加了以下CSS,但它不起作用:

.ct饼图{
显示器:柔性;
对齐项目:灵活开始;
}

.ct饼图.ct图例{
位置:绝对;
左侧填充:80px;
}


注意:我已经创建了作为反应组件的Piechart。

图表图例文档:
https://github.com/CodeYellowBV/chartist-plugin-legend/blob/master/index.html

代码:

反应组件,即饼图:

import React, { Component } from 'react';

var options = {
  width:200,
  height:200,
  showLabel:false,
  stackBars:true,
  plugins: [
        Chartist.plugins.legend()
  ]
};

class Pie extends Component {

  constructor(props){
    super(props);
  }
        const data = {
          labels: labels,
          series: dismissals
        };


    this.piechart = new Chartist.Pie('.ct-pie-chart', data, options);

  }

  render(){
    return(
      <div className="row">
          <div className="col-12 col-sm-6 col-lg-8">
                <div className="ct-pie-chart">
                    {this.piechart}
                </div>
          </div>
      </div>
    )}
}

export default Pie ;


CSS文件:

.ct-pie-chart .ct-legend li.inactive:before {
  background: transparent;
}

.piechart-title {
  text-align: center;
}

.ct-pie-chart .ct-legend {
  position: absolute;
  padding-left: 80px;
}

.ct-pie-chart .ct-legend.ct-legend-inside li{
           display: block;
           margin: 0;
}


屏幕截图(适用于小屏幕和大屏幕):





我添加了以下CSS,但它不起作用:

.ct-pie-chart {
  display: flex;
  align-items: flex-start;
}

.ct-pie-chart .ct-legend {
  position: absolute;
  padding-left: 80px;
}