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之：饼图外显示标签

回答

相关问题