Question

我想在页面上显示水平条形图。我正在使用谷歌图表库。我遇到的问题是有些标签被遗漏了。有没有办法强制显示所有标签？

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

function drawBasic() {

  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', ],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000],
    ['New York City2, NY', 8175000],
    ['Los Angeles2, CA', 3792000],
    ['Chicago2, IL', 2695000],
    ['Houston2, TX', 2099000],
    ['Philadelphia2, PA', 1526000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {
      width: '50%'
    },
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

演示jsfiddle

您将在上面的代码中注意到有11个标签/值。显示所有值但缺少其他每个标签。我想要显示所有标签。

Duplicate question＆lt;＆lt;已经提出了这个问题，但它涉及具有不同数据结构的不同类型的图表

Answer 1

您可以设置chartArea

的具体尺寸和展示位置

为每个轴标签和标题留出空间

以及图表标题，图例等......

请参阅以下示例，添加backgroundColor以突出显示每个区域

＆＃13;

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', ],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000],
    ['New York City2, NY', 8175000],
    ['Los Angeles2, CA', 3792000],
    ['Chicago2, IL', 2695000],
    ['Houston2, TX', 2099000],
    ['Philadelphia2, PA', 1526000]
  ]);

  var options = {
    backgroundColor: 'cyan',
    title: 'Population of Largest U.S. Cities',

    // total size of chart
    height: 600,
    width: 900,

    // adjust size of chart area
    chartArea: {
      backgroundColor: 'magenta',

      // allow 70px for hAxis title and ticks
      height: 480,

      // allow 200px for vAxis title and ticks
      left: 200,

      // allow 50px for chart title
      top: 50,

      // allow 200px for legend on right
      width: 500
    },

    colors: ['yellow'],
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Google Charts显示所有标签

1 个答案: