hAxis标签在Google图表中被截断

Question

通过哪个网站跟踪访问者的数量并对其进行一些分析.我们正在创建一个柱形图,以图形形式显示分析报告.

所有的东西都在图表上正确显示,但我们在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"的宽度和高度分别为350px和300px.我们还附上​​了以下问题的屏幕截图:

任何人都可以帮助我,我们如何防止这种切割问题.或者,谷歌图表API中是否有任何方法可以防止这种情况？

等待解决方案.

Answer 1

这是谷歌可视化中一直存在的问题,在我看来:(有一些可以试验的"技巧":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/