2017-01-30 8 views
0

Я использую Google Chart в AngularJS. Я используюПоказать pieSliceText за пределами круговой диаграммы Google

pieSliceText = value. 

Проблема в том, что для небольших фрагментов pieSliceText не отображается. This is the problem.

Я хочу, чтобы произвести результатам что-то вроде this.

Я не хочу, чтобы повернуть таблицу (я читал некоторые сообщения, которые предлагают повернуть диаграмму так, чтобы метки данных подходят правильно и показаны. Нет, мне нужно поддерживать ориентацию среза диаграммы как таковой).

Есть ли возможность отображения pieSliceText вне круговой диаграммы (по аналогии с отображением аннотаций вне столбцов в гистограмме)

annotations: {alwaysOutside: true} 

Спасибо за помощь заранее!

+0

'annotations' не включены в [данных формата] (https://developers.google.com/chart/interactive/docs/gallery/ piechart # data-format) для круговой диаграммы - 'legend.position: 'labeled' '- единственный параметр, который отображает значения за пределами диаграммы - см. [параметры конфигурации] (https://developers.google .com/chart/interactive/docs/gallery/piechart # configuration-options) - вы можете попробовать добавить свой собственный текст, как в [этот ответ] (http://stackoverflow.com/a/41894377/5090771) .. , – WhiteHat

ответ

0

Для отображения небольших значений используйте sliceVisibilityThreshold: 0 в options.

Подпись этого типа называется labeled.

См:

google.charts.load("current", {packages:["corechart"]}); 
 
google.charts.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Language', 'Speakers (in millions)'], 
 
    ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], 
 
    ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], 
 
    ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], 
 
    ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Indian Language Use', 
 
    backgroundColor: 'transparent', 
 
    pieSliceText: 'none', 
 
    sliceVisibilityThreshold: 0,    
 
    legend: 'labeled', 
 
    }; 
 

 
    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
 
    chart.draw(data, options); 
 
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="piechart" style="width: 900px; height: 500px;"></div>

 Смежные вопросы

  • Нет связанных вопросов^_^