Кто-нибудь знает, как заставить метки оси x быть вертикальными с API-интерфейсом Google?
Мне нужно разместить много ярлыков на маленькой диаграмме.
Спасибо
Кто-нибудь знает, как заставить метки оси x быть вертикальными с API-интерфейсом Google?
Мне нужно разместить много ярлыков на маленькой диаграмме.
Спасибо
API не предоставляет в любом случае для получения меток оси X с вертикальной осью (если я не пропустил его, потому что мне тоже нужно), то, что мы сделали, было комбинацией меток точек данных и обычных меток оси X - не идеально, но работает
Можете попробовать что-то вроде диаграмм Dundas, если вам нужно больше контроля
Добавьте параметры параметров с помощью slantedtextangle: 90 градусов для отображения метки по вертикали
var options ={ hAxis: {title: "Years" , direction:-1, slantedText:true, slantedTextAngle:90 }}
Это немного старый поток. но я искал это сам и наткнулся на это...
https://developers.google.com/chart/interactive/docs/gallery/areachart#Configuration_Options
Ищите: hAxis.slantedTextAngle и hAxis.slantedText. Установите угол 90 для вертикального отображения (или что-то среднее между уклоном).
Теперь возможно
var options = {
title: "Test",
hAxis: {
direction:-1,
slantedText:true,
slantedTextAngle:90 // here you can even use 180
}
};
Еще один возможный способ "обойти" эту проблему - добавить ось x:
chxt=x,y
может измениться на:
chxt=x,y,x
(убедитесь, что все, что вы сделали с исходной осью x, было одинаково применено), затем установите метки друг на друга по одной оси и любые другие смещения на одну ось x (или каждую третью в зависимости от того, как долго ваши метки будут).
chx1=0:|Alpha||Gamma||Epsilon||Eta|2:||Beta||Delta||Zeta
Обратите внимание на два || для пустой метки между ними. Таким образом, на вашем графике метки отключают оси, и у вас есть немного больше места:
Alpha Gamma Epsilon Eta
Beta Delta Zeta
Диагональный текст здесь. Это мой способ сделать это, я надеюсь, что это поможет им.
https://jsfiddle.net/8tvm9qk5/
Код:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
и
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addRows([
['abdasdasa', 925, 786],
['bbdasdas', 652, 156],
['cbdasdas', 300, 200],
['ddasdasb', 925, 786],
['edasdb', 652, 156],
['fasdasb', 300, 200],
['gdasdasdb', 925, 786],
['abdasdasa', 925, 786],
['bbdasdas', 652, 156],
['cbdasdas', 300, 200],
['ddasdasb', 925, 786],
['edasdb', 652, 156],
['fasdasb', 300, 200],
['gdasdasdb', 925, 786]
]);
var options = {
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height:600,
chartArea: {
height:300,
top:100,
},
hAxis: {
title: 'Departamentos',
titleTextStyle: {
color: '#FF0000',
},
slantedText:true,
slantedTextAngle:45,
},
vAxis: {
title: 'Kits'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
У меня не найти способ поворота оси, однако, что я сделал, это сокращение ярлыков, а затем создание легенды для объяснения того, что на самом деле представляют метки.
Нажмите здесь для примера диаграммы Google.
Да!
Установите hAxis.slantedText в true, а затем установите hAxis.slantedTextAngle = 90. Так вот...
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Equipment Performance Chart',
isStacked:true,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: 100
},
title: "Percentage"
},
hAxis: {
title: "Area",
slantedText:true,
slantedTextAngle:90
},
seriesType: "bars",
});
Трюк находится в chartArea.height = 300 и chartArea.top = 100, height: 600
var options = {
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height:600,
chartArea: {
height:300,
top:100,
},
hAxis: {
title: 'Departamentos',
titleTextStyle: {
color: '#FF0000',
},
slantedText:true,
slantedTextAngle:45,
},
vAxis: {
title: 'Kits'
}
};