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 行添加到 space 数据并将标签移动到 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>

Google条形图数据标签定位

Google bar chart data labels positioning

css

google-visualization

bar-chart

pygooglechart