hAxis标签在Google图表中被切断
跟踪访问哪个网站的访客数量，并对其进行一些分析。我们正在创建一个列图表，以图形形式显示分析报告。
所有的东西都正确地显示在图表上，但我们在haxis上显示了网站名称。由于网站名称太长，比如"www.google.com"，www.facebook.com，所以这个标签在haxis上被切断了。
绘制图表的代码如下：
function createTodayChart(chartData){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sources');
data.addColumn('number', 'Total Sales');
for (var i in chartData){
//alert(chartData[i][0]+'=>'+ parseInt(chartData[i][1]));
data.addRow([chartData[i][0], parseInt(chartData[i][1])]);
}
var options = {
legend: {position:'top'},
hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true},
vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'},
colors: ['#F1CA3A']
};
var chart = new google.visualization.ColumnChart(document.getElementById('my_div'));
chart.draw(data, options);
} chartData变量中的数据以数组形式出现，如下所示：
var chartData = [];
cartData.push('www.w3school.com', 106);
cartData.push('www.google.com', 210); My_div的宽度和高度分别为350 of和300 of。我们还附上这一问题的屏幕截图如下：
有人能帮我吗，我们怎么才能防止这个切割问题。或者，谷歌图表API中是否有防止这种情况的方法？
等待解决方案。
回答 1
Stack Overflow用户
发布于 2014-07-08 12:41:45
在谷歌可视化中，这一直是一个反复出现的问题，在我看来:(有一些“技巧”可以尝试：chartArea和hAxis.textPosition。下面是jsFiddle中具有以下chartData的代码，再现了上面的问题：
var chartData = [
['www.facebook.com', 45],
['http://www.google.com', 67],
['www.stackoverflow.com', 11]
];
小提琴-> http://jsfiddle.net/a6WYw/
chartArea可以用来调整上面的“填充”，从下面的图例/ hAxis中获取空间，以及条形图的内部高度(图表本身没有轴和图例)。例如
chartArea: {
top: 55,
height: '40%'
}会缩小chartArea，给hAxis上的传奇留下空间。
小提琴-> http://jsfiddle.net/Swtv3/
我个人的最爱是将hAxis图例放置在图表中
hAxis : { textPosition : 'in' } 这将尊重短和长的描述，并没有使图表看起来太“奇怪”时，有一些非常长的字符串。
小提琴-> http://jsfiddle.net/7HBmX/
根据注释-将"in“标签移出图表。据我所知，没有本土化的方法可以做到这一点，但我们总是可以改变<svg>。这可能是一项困难的任务，但在这种情况下，我们知道只有具有<text>属性的text-anchor="middle"元素是h轴标签和总体h轴描述。所以
var y, labels = document.querySelectorAll('[text-anchor="middle"]');
for (var i=0;i<labels.length-2;i++) {
y = parseInt(labels[i].getAttribute('y'));
labels[i].setAttribute('y', y+30);
}将标签移出图表。演示-> http://jsfiddle.net/970opuu0/
https://stackoverflow.com/questions/24629107
复制相似问题
腾讯云开发者
