ChartJs - 圓形邊框與多個數據集

我有多個數據集定期Chartjs圓環圖，使用此代碼爲數據集圓環圖上：ChartJs - 圓形邊框與多個數據集

datasets: 
    [ 
     { 
      label: 'Bugs', 
      data: [ 60 , 6.6666666666667 , 33.333333333333 ], 
      backgroundColor: ['#25CFE4', '#92E7F1', '#eeeeee'], 
     }, { 
      label: 'Fixes', 
      data: [ 60 , 0.44444444444444 , 39.555555555556 ], 
      backgroundColor: ['#514463', '#8C75AB', '#eeeeee'], 
     }, { 
      label: 'Redesigns', 
      data: [ 
      33.333333333333 , 10.37037037037 , 56.296296296296 ], 
      backgroundColor: ['#1B745F', '#40C1A0', '#eeeeee'], 
     } 
    ] 
};

我想實現秤上圓邊，我設法讓第一輪，但沒有與其他人運氣。

基本上，這是我現在有

而這就是我想實現（對不起，窮人的Photoshop）

我不如果標度的開始也是圓形的，或者灰色區域（爲了給尚未填充的東西留下印象而塗成灰色），氣體圓邊也是如此。

感謝

來源

2017-08-01 fsenna

你可能需要做這樣的事情。 https://stackoverflow.com/questions/31582555/how-to-put-rounded-corners-on-a-chart-js-bar-chart –

甚至更好：https：//stackoverflow.com/questions/36934967/圖表-js-donut-round-edges –

你可以使用pluginService來做到這一點。試試這個.... https://stackoverflow.com/questions/37384092/chart-js-doughnut-with-rounded-邊緣和文本爲中心 – Manjusha

做了一些調整，終於it.This不正是你想要的：

Chart.pluginService.register({ 
     afterUpdate: function (chart) { 
       var a=chart.config.data.datasets.length -1; 
       for (let i in chart.config.data.datasets) { 
        for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) { 
         if (Number(j) == (chart.config.data.datasets[i].data.length - 1)) 
          continue; 
         var arc = chart.getDatasetMeta(i).data[j]; 
         arc.round = { 
          x: (chart.chartArea.left + chart.chartArea.right)/2, 
          y: (chart.chartArea.top + chart.chartArea.bottom)/2, 
          radius: chart.innerRadius + chart.radiusLength/2 + (a * chart.radiusLength), 
          thickness: chart.radiusLength/2 - 1, 
          backgroundColor: arc._model.backgroundColor 
         } 
        } 
        a--; 
       } 
     }, 

     afterDraw: function (chart) { 
       var ctx = chart.chart.ctx; 
       for (let i in chart.config.data.datasets) { 
        for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) { 
         if (Number(j) == (chart.config.data.datasets[i].data.length - 1)) 
          continue; 
         var arc = chart.getDatasetMeta(i).data[j]; 
         var startAngle = Math.PI/2 - arc._view.startAngle; 
         var endAngle = Math.PI/2 - arc._view.endAngle; 

         ctx.save(); 
         ctx.translate(arc.round.x, arc.round.y); 
         console.log(arc.round.startAngle) 
         ctx.fillStyle = arc.round.backgroundColor; 
         ctx.beginPath(); 
         //ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI); 
         ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI); 
         ctx.closePath(); 
         ctx.fill(); 
         ctx.restore(); 
        } 
       } 
     }, 
    });

小提琴 - http://jsfiddle.net/tgyxmkLj/1/

來源

2018-02-05 16:58:51 user8296539

謝謝你這麼多，這是真棒。 – fsenna

很高興我能幫上忙：） – user8296539

這不是你可能會尋找確切的答案，但是這是我的要求得到圓邊的多個數據集。這個在每個甜甜圈數據集中捨棄一種顏色。

我用Chart.js Doughnut with rounded edges and text centered的答案做了一些修改。下面是代碼：

 // round corners 
    Chart.pluginService.register({ 
     afterUpdate: function (chart) { 
      if (chart.config.options.elements.arc.roundedCornersFor !== undefined) { 
       var a=chart.config.data.datasets.length -1; 
       for (let i in chart.config.data.datasets) { 
        var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor]; 

        arc.round = { 
         x: (chart.chartArea.left + chart.chartArea.right)/2, 
         y: (chart.chartArea.top + chart.chartArea.bottom)/2, 
         radius: chart.innerRadius + chart.radiusLength/2 + (a * chart.radiusLength), 
         thickness: chart.radiusLength/2 - 1, 
         backgroundColor: arc._model.backgroundColor 
        } 
        a--; 
       } 
      } 
     }, 

     afterDraw: function (chart) { 
      if (chart.config.options.elements.arc.roundedCornersFor !== undefined) { 
       var ctx = chart.chart.ctx; 
       for (let i in chart.config.data.datasets) { 
        var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor]; 
        var startAngle = Math.PI/2 - arc._view.startAngle; 
        var endAngle = Math.PI/2 - arc._view.endAngle; 

        ctx.save(); 
        ctx.translate(arc.round.x, arc.round.y); 
        console.log(arc.round.startAngle) 
        ctx.fillStyle = arc.round.backgroundColor; 
        ctx.beginPath(); 
        ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI); 
        ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI); 
        ctx.closePath(); 
        ctx.fill(); 
        ctx.restore(); 
       } 
      } 
     }, 
    });

小提琴：http://jsfiddle.net/n6vLv1zv/

希望它帶給你更近了一步。

來源

2018-02-05 16:05:10 user8296539

ChartJs - 圓形邊框與多個數據集

回答

相關問題