Chart.js v2：ドーナツとドーナツの間のスペース

Question

私はchart.js v2.5.0を使用しています。 ドーナツをドーナツの中に入れます。

I 2個のドーナツ（）間disdanceが同じドーナツ（B）内部スライス間の距離に影響を与えることなく、大きくなりたいです。

次の画像を参照してください。

現在、私はプロパティborderWidthを使用しています。 しかし、これはまた、Bの幅にも影響します。

Answer 1

これを達成するための唯一の方法は、既存のdoughnutコントローラを拡張して上書きすることです：

options: { 
       elements: { 
        arc: { 
         borderWidth: 18, 
        }, 
       }, 
       cutoutPercentage: 60, 
       responsive: true, 
      } 

私はドーナツは次のようになりたい：

次のコードを参照してください。スペーシングを決定するための独自のロジックを使用してメソッドを実行します（update）。

これはどのように行うのかを示す例です。この実装では、という新しいドーナツチャートオプションプロパティを追加し、各データセット間の空白を制御しました。

var helpers = Chart.helpers; 

// this option will control the white space between embedded charts when there is more than 1 dataset 
helpers.extend(Chart.defaults.doughnut, { 
    datasetRadiusBuffer: 0 
}); 

Chart.controllers.doughnut = Chart.controllers.doughnut.extend({ 
    update: function(reset) { 
    var me = this; 
    var chart = me.chart, 
     chartArea = chart.chartArea, 
     opts = chart.options, 
     arcOpts = opts.elements.arc, 
     availableWidth = chartArea.right - chartArea.left - arcOpts.borderWidth, 
     availableHeight = chartArea.bottom - chartArea.top - arcOpts.borderWidth, 
     minSize = Math.min(availableWidth, availableHeight), 
     offset = { 
      x: 0, 
      y: 0 
     }, 
     meta = me.getMeta(), 
     cutoutPercentage = opts.cutoutPercentage, 
     circumference = opts.circumference; 

    // If the chart's circumference isn't a full circle, calculate minSize as a ratio of the width/height of the arc 
    if (circumference < Math.PI * 2.0) { 
     var startAngle = opts.rotation % (Math.PI * 2.0); 
     startAngle += Math.PI * 2.0 * (startAngle >= Math.PI ? -1 : startAngle < -Math.PI ? 1 : 0); 
     var endAngle = startAngle + circumference; 
     var start = {x: Math.cos(startAngle), y: Math.sin(startAngle)}; 
     var end = {x: Math.cos(endAngle), y: Math.sin(endAngle)}; 
     var contains0 = (startAngle <= 0 && 0 <= endAngle) || (startAngle <= Math.PI * 2.0 && Math.PI * 2.0 <= endAngle); 
     var contains90 = (startAngle <= Math.PI * 0.5 && Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 2.5 && Math.PI * 2.5 <= endAngle); 
     var contains180 = (startAngle <= -Math.PI && -Math.PI <= endAngle) || (startAngle <= Math.PI && Math.PI <= endAngle); 
     var contains270 = (startAngle <= -Math.PI * 0.5 && -Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 1.5 && Math.PI * 1.5 <= endAngle); 
     var cutout = cutoutPercentage/100.0; 
     var min = {x: contains180 ? -1 : Math.min(start.x * (start.x < 0 ? 1 : cutout), end.x * (end.x < 0 ? 1 : cutout)), y: contains270 ? -1 : Math.min(start.y * (start.y < 0 ? 1 : cutout), end.y * (end.y < 0 ? 1 : cutout))}; 
     var max = {x: contains0 ? 1 : Math.max(start.x * (start.x > 0 ? 1 : cutout), end.x * (end.x > 0 ? 1 : cutout)), y: contains90 ? 1 : Math.max(start.y * (start.y > 0 ? 1 : cutout), end.y * (end.y > 0 ? 1 : cutout))}; 
     var size = {width: (max.x - min.x) * 0.5, height: (max.y - min.y) * 0.5}; 
     minSize = Math.min(availableWidth/size.width, availableHeight/size.height); 
     offset = {x: (max.x + min.x) * -0.5, y: (max.y + min.y) * -0.5}; 
    } 

    chart.borderWidth = me.getMaxBorderWidth(meta.data); 
    chart.outerRadius = Math.max((minSize - chart.borderWidth)/2, 0); 
    chart.innerRadius = Math.max(cutoutPercentage ? (chart.outerRadius/100) * (cutoutPercentage) : 0, 0); 
    chart.radiusLength = ((chart.outerRadius - chart.innerRadius)/chart.getVisibleDatasetCount()) + 25; 
    chart.offsetX = offset.x * chart.outerRadius; 
    chart.offsetY = offset.y * chart.outerRadius; 

    meta.total = me.calculateTotal(); 

    me.outerRadius = chart.outerRadius - (chart.radiusLength * me.getRingIndex(me.index)); 
    me.innerRadius = Math.max(me.outerRadius - chart.radiusLength, 0); 

    // factor in the radius buffer if the chart has more than 1 dataset 
    if (me.index > 0) { 
     me.outerRadius -= opts.datasetRadiusBuffer; 
     me.innerRadius -= opts.datasetRadiusBuffer; 
    } 

    helpers.each(meta.data, function(arc, index) { 
     me.updateElement(arc, index, reset); 
    }); 
    }, 
}); 

codepenでライブの例が表示されます。