google-visualization - 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 中的代码，带有以下图表数据，重现了问题多于 :

var chartData = [
    ['www.facebook.com', 45],
    ['http://www.google.com', 67],
    ['www.stackoverflow.com', 11]    
];

fiddle -> http://jsfiddle.net/a6WYw/
chartArea可用于调整上部“填充”从下面的图例/hAxis 中占用空间以及条形的内部高度(图表本身没有轴和图例)。例如

chartArea: {
   top: 55,
   height: '40%' 
}

将缩小图表区域，为 hAxis 上的图例留出空间。



fiddle -> http://jsfiddle.net/Swtv3/

我个人最喜欢的是将 hAxis图表内的图例

hAxis : { textPosition : 'in' } 

这将尊重短描述和长描述，并且当有一些非常长的字符串时，不会使图表看起来太“奇怪”。



fiddle -> 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/