2016-08-14 3 views
2

Я использую диаграмму google столбца. Мне нужно изменить направление ключа столбца, которое выделено красным кружком на изображении ниже.Удалить ключ столбца из диаграммы google

My google charts link

Так что я хочу достичь

  1. Есть ли какое-либо имущество, так что я могу изменить направление, как сверху, снизу или слева, так что отображается правильно (доход), как сейчас это дисплей (R ...).

  2. Если направление не может быть изменен, то как я могу удалить это из диаграмм

ответ

3

Что вам нужно, это свойство называется ChartArea

Вы можете контролировать большую площадь сверху, справа , внизу или слева.
Здесь область диаграммы является областью только графика, исключая ярлык, легенду или любое другое значение, отличное от самого графика. Вы можете уменьшить область диаграммы так, чтобы метка/легенда могла прийти полностью.

chartArea: { 
    height: '500', 
    left: 0, 
    right: 0, 
    top: 30, 
    bottom: 0 
}, 

Что касается позиционирования легенды, вы можете изменить место легенды используя

legend: { 
       position: 'left' 
      } 

Чтобы удалить легенды вообще использовать

legend:{position: 'none'} 




Ниже фрагмент кода или это JSFIDDLE к посмотри, как это работает.

google.charts.load('current', { 
 
    'packages': ['corechart'] 
 
}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Submitter', 'Count'], 
 
    ['Service', 168], 
 
    ['NAME 1', 42], 
 
    ['NAME 2', 36], 
 
    ['NAME 3', 35], 
 
    ['NAME 4', 34], 
 
    ['NAME 5', 30], 
 
    ['NAME 6', 24], 
 
    ['NAME 7', 21], 
 
    ['NAME 8', 18] 
 
    ]); 
 
    var options = { 
 
    pieSliceText: 'percentage', 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    height: '500', 
 
    chartArea: { 
 
     height: '500', 
 
     left: 0, 
 
     right: 0, 
 
     top: 30, 
 
     bottom: 0 
 
    }, 
 
    }; 
 
    var chart = new google.visualization.PieChart(document.getElementById('chart6_div')); 
 
    chart.draw(data, options); 
 
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart6_div"></div>

+0

этот ответ работает, вот [другой пример] (http://stackoverflow.com/a/37275107/5090771) – WhiteHat

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