谷歌图表 - 标签未显示答案

【问题标题】：Google charts - Labels are not showing谷歌图表 - 标签未显示
【发布时间】：2017-09-19 12:13:17
【问题描述】：

我试图在一行中使用谷歌图表创建 3 个图表。但它没有显示值的标签，我们可以看到图表之间有很多空间是空的。有什么办法可以删除它空间并在图表中正确显示标签？

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

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 5],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    pieSliceText: 'value',
    pieHole: '0.5',

    legend: {
      position: 'labeled',
      labeledValueText: 'both',
      textStyle: {
        color: 'blue',
        fontSize: 14
      }
    },
  };

  var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
  var chart2 = new google.visualization.PieChart(document.getElementById('chart2'));
  var chart3 = new google.visualization.PieChart(document.getElementById('chart3'));
  options.title = 'industries For USA';
  chart1.draw(data, options);
  options.title = 'Categories For USA';
  chart2.draw(data, options);
  options.title = 'Categories For Construction';
  chart3.draw(data, options);
}

.chart-wrapper {
  float: left;
  width: 33%;
}

.top-five-charts {
  width: 100%;
  display: block;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="top-five-charts">
  <div class="chart-wrapper">
    <div id="chart1" class="insight-pie"></div>
  </div>
  <div class="chart-wrapper">
    <div id="chart2" class="insight-pie"></div>
  </div>
  <div class="chart-wrapper">
    <div id="chart3" class="insight-pie"></div>
  </div>
</div>

这是正常屏幕的输出

【问题讨论】：

调整 google 的 PieChart 是最糟糕的 -- 减少图表之间的差距，使用选项 --> chartArea.width = '100%' -- 但这不会修复标签 -- 显示标签，使用选项 - -> legend.position = 'top' -- 而不是 'labeled' 并删除 fontSize，14 太大 --- 但这会带来差距...

标签： javascript css charts google-visualization

【解决方案1】：

在绘制图表之前，只需在您的 JavaScript 代码中添加这一行：

options.chartArea = {left: '10%', width: '100%', height: '65%'};

我还将图例字体大小更改为 10。

它看起来像这样：

这是说明它的 JSFiddle：https://jsfiddle.net/6r3ms2tz/

【讨论】：

这会创建相同的输出
你检查过 JSFiddle 吗？不要忘记将字体大小也更改为 10。

【解决方案2】：

您应该看看响应式设计原则，请查看此链接：https://developers.google.com/chart/interactive/docs/basic_customizing_chart

只需根据您的选择更改：'legend':'right'。

【讨论】：

【解决方案3】：

经过几次尝试，下面的工作：

代码：

let options = {
  legend: {
    position: "labeled",
  },
  chartArea: {
    width: "100%"
  }
};

下面是我的案例的 HTML，因为我使用的是 https://github.com/FERNman/angular-google-charts

  <google-chart
    style="width: 100%; height: 100%;"
  >
  </google-chart>

您的案例的 HTML：

<div id="chart1" class="insight-pie" style="width: 100%; height: 100%;" ></div>

希望对您有所帮助。

【讨论】：