Google 折线图呈现为空，但没有错误

Question

我不知道我是否只是失去了理智，但是：我正在尝试获得一个非常简单的 Google 折线图来呈现，虽然 Javascript 不是抛出任何错误，生成的 SVG 实际上总是空的，高度约为 21px。

我在网站的其他地方有一个页面，每当您单击 .region link 时，它都会启动一个灯箱，并且在该灯箱内实际上是完全相同的 Google折线图 - 唯一的区别是它的数据点是根据单击 link 的各种 data 属性动态绘制的。这工作完美，代码几乎相同。

我最初认为我犯了一个简单的错误，但我至少用 4 种不同的方式重新编码了这个东西，并且 none 其中有效。唯一真正的区别是这个图表是通过 callback 函数在页面加载时生成的。我还尝试在 setTimeout 中的单击事件上绘制它，将其完全抽象为另一个函数……但没有任何效果。

这是我的代码 jsFiddle；如果这对任何人来说都更容易的话，还有下面的一个片段。

希望我只是累了，错过了一些明显的东西，但这让我在过去的几个小时里感到困惑。

google.load('visualization', '1', {'callback': resultGraph, 'packages':['corechart']});

var chartData;
 
function resultGraph() {
    chartData = google.visualization.arrayToDataTable([
   ['Group',    'World'],
   ['',      0],
   ['Flash Laggards',   14.2],
   ['Flash Aware',   24.4],
   ['Flash Users',   36],
   ['Flash Innovators', 12.8],
   ['',      0],
  ]);
    var options = {
   legend: 'none',
   series: {
    0: { color: '#1976D2' },
   },
   chartArea: {
    left: '30',
    top: '30',
    width: '100%'
   },
   hAxis: {
    gridlines: {
     count: 3
    },
   },
  };
  
  var chart = new google.visualization.LineChart(document.getElementById('datachart'));
  
  chart.draw(chartData, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type='text/javascript' src='//www.google.com/jsapi?ver=1.0.1'></script>

Data chart:

<div id="datachart">
    <span>Loading...</span>
</div>

Answer 1

正如我在评论中所说，我不知道为什么会这样，但我可以提供this simple fix

JS改

function resultGraph() {
    $("#datachart").empty();
    ...
}

Answer 2

图表实际上并没有呈现为空，它只是呈现为较小。

当div

<div id="datachart">
    <span>Loading...</span>
</div>

渲染它的渲染尺寸约为65x17pxs。当 SVG 元素呈现为 65x17 div 时，它不会放大 div，因此呈现 div 不会显示它，因为它太小了。

当你删除 span 时（我真的无法解释这个，因为我也不太明白）SVG 元素能够放大 div.

因此，您可以通过从一开始就设置 div 的大小来使用它，例如

style="width:700px; height:250px;"

或者在选项中设置图表的大小

var options = {
        width:700,
        height:250
    }

或者作为最后一个选项，您当然可以在绘制图表之前删除跨度。

document.getElementById('datachart').innerHTML = '';        
chart.draw(chartData, options);

编辑：我不能放弃这个，所以我又玩了一会儿。显然，仅浮动跨度就足够了，然后图表将呈现在正确的站点中。 Absolute/fixed 定位也有效。

因此，第四种解决方案是将 style="float:left" 添加到您的跨度中，或者可能是可重复使用的 class，例如

.preChartText {
    float:left;
}

Google 折线图呈现为空，但没有错误

Google Line Chart rendering as empty, but no errors

javascript

google-visualization