Пометка этикеток данных гистограммы Google

Question

Как изменить положение метки этикеток в Google диаграмме? Я хотел бы иметь метки данных (2003,2004, ...) между стержнями - не прямо под ними, как сейчас. enter image description here

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], 
    ['2003', 1336060, 400361, 1001582, 997974], 
    ['2004', 1538156, 366849, 1119450, 941795], 
    ['2005', 1576579, 440514, 993360, 930593], 
    ['2006', 1600652, 434552, 1004163, 897127], 
    ['2007', 1968113, 393032, 979198, 1080887], 
    ['2008', 1901067, 517206, 916965, 1056036] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.ColumnChart(document.getElementById('chart')). 
     draw(data, 
      {title:"Yearly Coffee Consumption by Country", 
      width:600, height:400, 
      vAxis: {title: "Year"}, isStacked: true, 
      hAxis: {title: "Cups"}} 
    ); 
} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawVisualization); 

Bar chart image

Answer 1

Вот некоторые варианты ...

Я добавил null строки в пространстве данных и перемещать метки к null строк.

Это приводит к появлению меток на второй строке.
Я думал, что maxAlternation может исправить проблему, но только наклон текста.

CHART_1 выглядит лучше меня ...

google.charts.load('current', {packages: ['corechart']}); 
 
google.charts.setOnLoadCallback(drawVisualization); 
 

 
function drawVisualization() { 
 
    // add null data for label placement 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], 
 
    [null, 1336060, 400361, 1001582, 997974], 
 
    ['2003', null,  null,  null,  null], 
 
    [null, 1538156, 366849, 1119450, 941795], 
 
    ['2004', null,  null,  null,  null], 
 
    [null, 1576579, 440514, 993360, 930593], 
 
    ['2005', null,  null,  null,  null], 
 
    [null, 1600652, 434552, 1004163, 897127], 
 
    ['2006', null,  null,  null,  null], 
 
    [null, 1968113, 393032, 979198, 1080887], 
 
    ['2007', null,  null,  null,  null], 
 
    [null, 1901067, 517206, 916965, 1056036], 
 
    ['2008', null,  null,  null,  null] 
 
    ]); 
 

 
    var options = { 
 
    width: 600, 
 
    height: 400, 
 
    vAxis: { 
 
     title: "Year" 
 
    }, 
 
    isStacked: true, 
 
    hAxis: { 
 
     title: "Cups" 
 
    } 
 
    }; 
 

 
    // labels appear on second line (of course) 
 
    options.title = 'CHART_0'; 
 
    var chart1 = new google.visualization.ColumnChart(
 
    document.getElementById('chart0') 
 
).draw(data, options); 
 

 
    // maxAlternation slants the text 
 
    options.title = 'CHART_1'; 
 
    options.hAxis.maxAlternation = 1; 
 
    var chart1 = new google.visualization.ColumnChart(
 
    document.getElementById('chart1') 
 
).draw(data, options); 
 

 
    // can only control slant 1-90 
 
    // setting to zero causes labels not to display 
 
    options.title = 'CHART_2'; 
 
    options.hAxis.slantedText = true; 
 
    options.hAxis.slantedTextAngle = 90; 
 
    var chart1 = new google.visualization.ColumnChart(
 
    document.getElementById('chart2') 
 
).draw(data, options); 
 

 
    drawVisualizationLeft(); 
 
} 
 

 
function drawVisualizationLeft() { 
 
    // add null data for label placement 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], 
 
    ['2003', null,  null,  null,  null], 
 
    [null, 1336060, 400361, 1001582, 997974], 
 
    ['2004', null,  null,  null,  null], 
 
    [null, 1538156, 366849, 1119450, 941795], 
 
    ['2005', null,  null,  null,  null], 
 
    [null, 1576579, 440514, 993360, 930593], 
 
    ['2006', null,  null,  null,  null], 
 
    [null, 1600652, 434552, 1004163, 897127], 
 
    ['2007', null,  null,  null,  null], 
 
    [null, 1968113, 393032, 979198, 1080887], 
 
    ['2008', null,  null,  null,  null], 
 
    [null, 1901067, 517206, 916965, 1056036] 
 
    ]); 
 

 
    var options = { 
 
    width: 600, 
 
    height: 400, 
 
    vAxis: { 
 
     title: "Year" 
 
    }, 
 
    isStacked: true, 
 
    hAxis: { 
 
     title: "Cups" 
 
    } 
 
    }; 
 

 
    // maxAlternation slants the text 
 
    options.title = 'CHART_3'; 
 
    options.hAxis.maxAlternation = 1; 
 
    var chart3 = new google.visualization.ColumnChart(
 
    document.getElementById('chart3') 
 
).draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart0"></div> 
 
<div id="chart1"></div> 
 
<div id="chart2"></div> 
 
<div id="chart3"></div>