2017-04-20 19 views
1

Chart.jsを使用しています。下の図のような半分のドーナツチャートが必要です。しかし、私はパイの厚さを変えられません。私は、プロパティinnerRadiusを試みたが、まだそれはここでChart.js(ドーナツチャート)内の半径が変更されていません

enter image description here

を働いていない私のコードは

ある
public getHalfDoughnutChart(records) { 
    let data = { 
     labels: ["Worked Hours","Remaining Hours"], 
     datasets: [{ 
     label: 'Today\'s Worked Hours', 
     data: [records.length? records[0].duration.hour: 0,9], 
     backgroundColor: [ 
      'rgba(75, 174, 79, 1)', 
      'rgba(255, 255, 255, 0)' 
     ] 
    }] 
}; 

    let options = { 
     circumference: Math.PI, 
     rotation: 1.0 * Math.PI, 
     innerRadius: "10%", 
     legend: { 
     display: false 
     }, 
     layout:{ 
     padding:40 
     }, 
    } 

    return this.getChart(this.halfDoughnutCanvas.nativeElement, "doughnut", data, options); 
    } 



getChart(context, chartType, data, options?) { 
    return new Chart(context, { 
     type: chartType, 
     data: data, 
     options: options 
    }); 
} 

答えて

3

あなたはoptionsオブジェクトに

let options = { 
    circumference: Math.PI, 
    rotation: 1.0 * Math.PI, 
    percentageInnerCutout: 10, 
    legend: { 
    display: false 
    }, 
    layout:{ 
    padding:40 
    }, 
} 

percentageInnerCutoutプロパティを使用する必要がありますまた、これを確認することができます質問How to vary the thickness of doughnut chart, using ChartJs.?

P.S.私はそれがバージョンの依存を理解するにつれ、

Chart.jsバージョン>2.0使用cutoutPercentage

は、そうでない場合は、すでに試したpercentageInnerCutout

+0

を使用していますが、バージョンをんchart.js何:( –

+0

動作しない場合? – Leguest

+0

それは感謝を働かせました:) –

関連する問題