Лейбл 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" равны соответственно 350px и 300px. Мы также приложили скриншот этого вопроса, приведенного ниже:

Может ли кто-нибудь помочь мне, как мы можем предотвратить эту проблему. Или, существует ли какой-либо метод в API диаграмм google, чтобы предотвратить это?

Ожидание решения.

Ответ 1

Это всегда повторяющаяся проблема в визуализации Google, на мой взгляд:( Есть несколько "трюков", которые можно поэкспериментировать с: chartArea и hAxis.textPosition. Вот ваш код в jsFiddle со следующими диаграммами, воспроизведя проблему выше:

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%' 
}

Усадит диаграмму, давая место легенде на 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);
}

чтобы перемещать метки вне диаграммы. demo → http://jsfiddle.net/970opuu0/