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

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

它是如此简单：http://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties

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属性，它实际上是数组，就像backgroundColor一样。

Answer 2

是的，你可以改变边界color.Use 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