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配列長

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円グラフスライスの番号に等しいです。実際にはbackgroundColorのような配列になっているデータセットに対して、borderColorプロパティを追加したことがわかります。

Answer 2

コードは、はい、あなたはこのために国境color.Use bordercolorプロパティを変更することができます。 borderColorの配列を使用する必要があります。 https://codepen.io/anon/pen/NadBvz

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