我正在使用Google Bar Chart,并且我想将x轴标签移动到顶部。我写了代码,但没有发生。请检查小提琴和屏幕截图。 有什么建议吗?Google Bar Chart将x轴标签移动到顶部
感谢,
`https://jsfiddle.net/n5paq0r9/`
我正在使用Google Bar Chart,并且我想将x轴标签移动到顶部。我写了代码,但没有发生。请检查小提琴和屏幕截图。 有什么建议吗?Google Bar Chart将x轴标签移动到顶部
感谢,
`https://jsfiddle.net/n5paq0r9/`
。 。 。 。 后
chart.draw(data, options);
添加以下代码
var height = options.height;
var array = $("#chart_div svg g").children()[3].children;
for (var i = 0; i < array.length; i++) {
$("text").removeClass("currentNode");
array[i].children[0].setAttribute("class", "currentNode");
var y = height - parseFloat($(".currentNode").attr("y"));
$(".currentNode").attr("y", y);
}
Top-X charts仅适用于材料图表
材料条形图
google.charts.Bar
与核心条形图
google.visualization.BarChart
看到下面的工作片段...
google.charts.load('current', {packages: ['bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['App Name', 'Density', { role: 'style' }, { role: 'annotation' } ],
['My Test App Name Appears Here', 6.94, 'blue', 'My Test App Name Appears Here' ],
['My Test App Name Appears Here', 10.49, 'blue', 'My Test App Name Appears Here' ],
['My Test App Name Appears Here', 19.30, 'blue', 'My Test App Name Appears Here' ],
['My Test App Name Appears Here', 24, 'blue', 'My Test App Name Appears Here' ],
['My Test App Name Appears Here', 5.30, 'blue', 'My Test App Name Appears Here' ],
['My Test App Name Appears Here', 2.30, 'blue', 'My Test App Name Appears Here' ],
['My Test App Name Appears Here', 21.45, 'blue', 'My Test App Name Appears Here' ]
]);
var options = {
chartArea: {width: '90%'},
height: 500,
legend: { position: 'none' },
vAxis:{textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
hAxis:{textStyle:{color: '#005500',fontSize: '11', paddingRight: '100',marginRight: '100'}},
bars: 'horizontal',
axes: {
x: {
0: { side: 'top'}
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
$(window).resize(function(){
drawBasic();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
谢谢您的时间。它工作正常,但注释似乎没有出现在图表中?我们如何将注释添加到材质条形图? –
有几个选项,包括注释,这些选项根本无法在_Material_图表 – WhiteHat
上运行。你保存了我的一天:)谢谢 –
啊这就是好消息:) –
你应该等待''ready'' [event](https://developers.google.com/chart/interactive/docs/gallery/barchart#事件)之前修改图表 - 更多的数据图表/更长的时间绘制,可能会导致错误,否则...可能会导致错误... – WhiteHat