chart.js之：餅圖外顯示標籤

chart.js之2.6.0chart.js之：餅圖外顯示標籤

我需要呈現的圖表，看起來像這樣：

始終顯示所有的提示是不是一種可接受的方式，因爲他們不會得到渲染以適當的方式：

很抱歉，我找不到解決方案。我已經試過片段標籤插件，但是這有相同的問題，因爲它的標籤重疊，我不能隱藏某些標籤。

下面是代碼，創建使用片標籤到標籤定位片我上面的圖表：

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]); 
}

結果：

來源

2017-08-17 Sven Kannenberg

你能提供你已有的代碼？ –

查看https://stackoverflow.com/questions/36209074/how-to-move-labels-position-on-chart-js-pie – bunzab

@JeffHuijsmans我已經添加了負責圖表本身的代碼。我正在使用的類只是選項的包裝器。 –

真正的問題所在在切片很小時與標籤重疊。您可以使用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演示

來源

2017-08-22 07:29:19

感謝您的回答！問題是，某些切片可能具有相同的背景色，因爲這些可以由用戶分配。這意味着用戶不能再區分哪一個是哪一個。 –

傳說將解決相同顏色的問題。 –

  // 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/

來源

2017-08-25 12:54:39

嗨。 OP帖子不適用於highcharts，它適用於charts.js.您的帖子無關緊要 –

chart.js之：餅圖外顯示標籤

回答

相關問題