javascript - 谷歌图表未正确显示图例

Question

在下面的屏幕截图中找到示例问题。当我们使用谷歌图表加载图形用户界面时，图例数据即将到来但无法正确显示。此问题在笔记本电脑中的频率较低，但在台式机中的频率较高。请指导。

Answer 1

这个问题是在隐藏容器中绘制图表的结果

为了演示，请参阅以下工作片段，
图表在绘制时保持隐藏状态，然后在触发
图表事件时显示 结果与发布的图像相似 'ready'

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'year', type: 'date'},
    {label: 'Annual Sales', id: 'Sales', type: 'number'},
    {label: 'Annual Expenses', id: 'Expenses', type: 'number'},
    {label: 'Annual Profit', id: 'Profit', type: 'number'}],
    [{v:new Date('2014'), f:'2014'}, 0, 400, 200],
    [{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
    [{v:new Date('2015'), f:'2015'}, 0, 460, 250],
    [{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
    [{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
    [{v:new Date('2016'), f:'2016'}, 600, 0, 0],
    [{v:new Date('2017'), f:'2017'}, 0, 540, 350],
    [{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
  ]);

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    },
    bars: 'horizontal',
    hAxis: {
      format: 'decimal'
    },
    vAxis: {
      format: 'yyyy'
    },
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3'],
    isStacked: true,
    bar: {
      groupWidth: '90%'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    $(container).removeClass('hidden');
  });

  chart.draw(data, google.charts.Bar.convertOptions(options));
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

---

要纠正此问题，
请确保图表的容器可见，
在第一次绘制之前，
请参阅以下工作片段...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'year', type: 'date'},
    {label: 'Annual Sales', id: 'Sales', type: 'number'},
    {label: 'Annual Expenses', id: 'Expenses', type: 'number'},
    {label: 'Annual Profit', id: 'Profit', type: 'number'}],
    [{v:new Date('2014'), f:'2014'}, 0, 400, 200],
    [{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
    [{v:new Date('2015'), f:'2015'}, 0, 460, 250],
    [{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
    [{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
    [{v:new Date('2016'), f:'2016'}, 600, 0, 0],
    [{v:new Date('2017'), f:'2017'}, 0, 540, 350],
    [{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
  ]);

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    },
    bars: 'horizontal',
    hAxis: {
      format: 'decimal'
    },
    vAxis: {
      format: 'yyyy'
    },
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3'],
    isStacked: true,
    bar: {
      groupWidth: '90%'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

从编辑图表“数据”选项卡中选择使用“使用第 1 行作为标题”