Question

您好我正在使用Chart.js制作饼图。我有一个关于造型的小问题。饼图的背景是紫色的，我想让饼图的外围变成紫色。默认颜色为白色。

是否可以从默认颜色更改外围颜色？

当前视图

这是当前的观点。周边是白色的。我想将它改为紫色以将其同化为背景。

代码

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
}

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
    console.log(!this.state.slideOpen)
}

update() {
  var piData;
  this.setState({
    piData : piData
  })
console.log('data' + piData)
}    

render(){
 console.log('check' + piData)
 const CategoriesPanel = this.state.slideOpen? "slideOpen" : "";
 const { length } = this.props
 console.log( 'result' + piData )

  var totalData = piData + piData2 + piData3 + piData4 + piData5;

  let newpiData =  function() {
   return parseInt((piData /  totalData ) * 100 ) };

   let newpiData2 =  function() {
   return parseInt((piData2 /  totalData ) * 100) };

   let newpiData3 =  function() {
   return  parseInt((piData3 /  totalData ) * 100) };

   let newpiData4 =  function() {
   return  parseInt((piData4 /  totalData ) * 100) };

   let newpiData5 =  function() {
   return  parseInt((piData5 /  totalData ) * 100) };

   console.log('update data ' + newpiData())

  console.log('question item piData parent component' + piData)


  const data = {
  labels: [
    'question1',
    'question2',
    'question3',
    'question4',
    'question5'
   ],
  datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    hoverBackgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ]
  }]};
return(
 <div>
 <div id="chart" className={CategoriesPanel}>
 <Pie style={{"fontSize" : "20px" }}data={data}/>
 <div className="categoriesSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div>
<button onClick={this.update} className="chartButton">Update Information</button></div>

 <div className="clear">

 <List  />
 <ListSecond />
 <ListThird />
 <ListFourth />
 <ListFifth />
 </div>
 </div>
    )
}
}

Answer 1

是的，您可以更改边框颜色。使用bordercolor属性。你需要使用borderColor数组。这里borderColor数组长度等于饼图切片的数量

borderColor:['purple','purple','purple','purple','purple']


 datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    hoverBackgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
  borderColor:['purple','purple','purple','purple','purple']
  }]};

DEMO：https://codepen.io/anon/pen/NadBvz

DOCS：http://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties

Answer 2

就像那样简单：http://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties

<SVG width="120px" height="120px">
  <g>
    <Path d="M0,0 L120,0 L120,120 L0,120 Z" fill="#f6be98" />
    <Path d="M60,0 L1.27003148173183,105.122741582605 A10,10 0 0 0 18.7299685182682,114.877258417395 L60,41.0066440783012 L101.270031481732,114.877258417395 A10,10 0 0 0 118.729968518268,105.122741582605  Z" fill="#4472c4" />
  </g>
</SVG>

正如您所看到的，我为数据集添加了const data = { labels: [ 'question1', 'question2', 'question3', 'question4', 'question5' ], datasets: [{ data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()], backgroundColor: [ 'orange', 'blue', 'red', 'purple', 'green' ], hoverBackgroundColor: [ 'orange', 'blue', 'red', 'purple', 'green' ], borderColor: ["purple", "purple", "purple", "purple", "purple"] }]};属性，实际上数组就像borderColor一样。

可以在Chart.js中更改饼图周边的颜色吗？

2 个答案: