Question

我正在使用react-chartjs-2饼图，我想删除切片之间的线（边界），但我想在图表周围显示边框。有人可以告诉我这样做的方法吗？预先感谢！

我的代码现在是这样的：

import {Pie} from 'react-chartjs-2';
class App extends Component {
   render() {
      return (
         <div className='pieChartPositioner'>
            <Pie              
              height={36}
              width={36}
              data={{
                 datasets: [{
                     data: [20 , 80],
                     backgroundColor: ['red', 'green'],
                     borderColor: 'black',
                     borderWidth: 2,
                  }],
               }
             }/>
         </div>  
      )
   }
}

Answer 1

您需要在饼图的borderWidth配置中将0设置为arc，默认情况下将其设置为2。

电弧配置可用于极地地区，甜甜圈和馅饼图表，并在elements键下设置。

您可以通过以下任一方法进行更改：

1。设置全局arc选项

Chart.defaults.global.elements.arc.borderWidth = 0;

2。或通过您传递到图表的options对象

var options = {
  elements: {
    arc: {
      borderWidth: 0
    }
  }
};

有关更多信息，请参见docs。

Answer 2

我写这封信是因为标记的答案并没有帮助我，我想这是在同时改变了。

您需要在要传递给borderWidth道具的数据集中设置data。

示例：

const data = {
        datasets: [{
          borderWidth:0,
          data: [9, 1],
          backgroundColor: ['#ffffff', '#000000'],
        }],
    };
    
    return (
      <Pie data={data} />
    )

是否可以删除段之间的边界，但在react-chartjs-2中的饼形图周围保留边界？

2 个答案: