Google图表会显示所有标签 [英] Google Charts show all labels

问题描述

我想在网页上显示一个水平条形图。我使用的是谷歌图表库。我遇到的问题是一些标签被漏掉了。是否有强制显示所有标签的方法？

I would like to display a horizontal bar chart on a page. I am using the google charts library. The issue I am having is that some labels are being missed off. Is there a way of forcing all labels to display?

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

Demo jsfiddle

您会注意到上述代码中有11个标签/值。显示所有值，但每个其他标签都缺失。我想要显示所有标签。

You will notice in the above code that there are 11 labels/values. All values are displayed but every other label is missing. I would like all labels to be displayed.

重复问题<已提出此问题，但涉及具有不同数据结构的不同类型的图表。

Duplicate question << This question has been asked but it concerns a different type of chart with a different data structure

推荐答案

可以设置特定大小和位置 chartArea

you can set specific size and placement of the chartArea

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

to allow room for each axis label and title

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

along with the chart title, legend, etc...

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

see following example, added backgroundColor to highlight each area

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);
}

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

这篇关于Google图表会显示所有标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！