chart.js：円グラフの外側ラベルの表示

Question

chart.js 2.6.0

私はこのようになり、チャートレンダリングする必要があります。

は、必ずすべてのツールチップを表示しません彼らは適切な方法でレンダリングされませんので、許容可能な方法で、：

残念ながら解決策がまだ見つかりませんでした。私はピースラベルプラグインを試しましたが、ラベルが重なり、特定のラベルを隠すことができないので、これと同じ問題があります。

ここでスライス上のラベルを配置するピースラベルを使用して、私のチャートを作成するコードです：

private createStatusChart(): void { 
    const chartData = this.getStatusChartData(); 

    if (!chartData) { 
     return; 
    } 

    const $container = $(Templates.Dashboard.ChartContainer({ 
     ContainerID: 'chart-status', 
     HeaderText: 'Status' 
    })); 

    this._$content.append($container); 

    const legendOptions = 
     new Model.Charts.LegendOptions() 
      .SetDisplay(false); 

    const pieceLabelOptions = 
     new Model.Charts.PieceLabelOptions() 
      .SetRender('label') 
      .SetPosition('outside') 
      .SetArc(true) 
      .SetOverlap(true); 

    const options = 
     new Model.Charts.Options() 
      .SetLegend(legendOptions) 
      .SetPieceLabel(pieceLabelOptions); 

    const chartDefinition = new Model.Charts.Pie(chartData, options); 
    const ctx = this._$content.find('#chart-status canvas').get(0); 

    const chart = new Chart(ctx, chartDefinition); 
} 

private getStatusChartData(): Model.Charts.PieChartData { 
    if (!this._data) { 
     return; 
    } 

    const instance = this; 
    const data: Array<number> = []; 
    const labels: Array<string> = []; 
    const colors: Array<string> = []; 

    this._data.StatusGroupings.forEach(sg => { 
     if (!sg.StatusOID) { 
      data.push(sg.Count); 
      labels.push(i18next.t('Dashboard.NoStateSet')); 
      colors.push('#4572A7'); 

      return; 
     } 

     const status = DAL.Properties.GetByOID(sg.StatusOID); 

     data.push(sg.Count); 
     labels.push(status ? status.Title : i18next.t('Misc.Unknown')); 
     colors.push(status ? status.Color : '#fff'); 
    }); 

    const dataset = new Model.Charts.Dataset(data).setBackgroundColor(colors); 

    return new Model.Charts.PieChartData(labels, [dataset]); 
} 

結果：

Answer 1

本当の問題はあるが、スライスが小さい場合はラベルの重なりがあります。PieceLabel.jsを使用すると、重なり合ったラベルを隠すことでその問題を解決できます。あなたはラベルを隠すことができないので、

すべてのスライスの名前を表示しますそれとも、正確な動作をしたい場合は、highchartsに行くことができた、伝説を使用しますが、それは商業的使用のためのライセンスが必要であることを述べました。

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100); 
 
}; 
 
var ctx = document.getElementById("chart-area").getContext("2d"); 
 
var myDoughnut = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
    labels: ["January", "February", "March", "April", "May"], 
 
    datasets: [{ 
 
     data: [ 
 
     250, 
 
     30, 
 
     5, 
 
     4, 
 
     2, 
 

 
     ], 
 
     backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'], 
 
     borderColor: 'white', 
 
     borderWidth: 5, 
 
    }] 
 
    }, 
 
    showDatapoints: true, 
 
    options: { 
 
    tooltips: { 
 
     enabled: false 
 
    }, 
 
    pieceLabel: { 
 
     render: 'label', 
 
     arc: true, 
 
     fontColor: '#000', 
 
     position: 'outside' 
 
    }, 
 
    responsive: true, 
 
    legend: { 
 
     position: 'top', 
 
    }, 
 
    title: { 
 
     display: true, 
 
     text: 'Testing', 
 
     fontSize: 20 
 
    }, 
 
    animation: { 
 
     animateScale: true, 
 
     animateRotate: true 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script> 
 
<canvas id="chart-area"></canvas>

Fiddleデモ

Answer 2

  // I think this script should be solve your problem 

      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 
     <script>Highcharts.chart('container', { chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false, 
        type: 'pie' 
       }, 
       title: { 
        text: 'Browser market shares January, 2015 to May, 2015' 
       }, 
       tooltip: { 
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: true, 
          format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
          style: { 
           color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
          } 
         } 
        } 
       }, 
       series: [{ 
        name: 'Brands', 
        colorByPoint: true, 
        data: [{ 
         name: 'Microsoft Internet Explorer', 
         y: 56.33 
        }, { 
         name: 'Chrome', 
         y: 24.03, 
         sliced: true, 
         selected: true 
        }, { 
         name: 'Firefox', 
         y: 10.38 
        }, { 
         name: 'Safari', 
         y: 4.77 
        }, { 
         name: 'Opera', 
         y: 0.91 
        }, { 
         name: 'Proprietary or Undetectable', 
         y: 0.2 
        }] 
       }] 
      }); 

      </script> 
    http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/