Question

我使用针对R的googleVis包生成了一些Javascript。当我这样做时，折线不会显示。我尝试过各种各样的浏览器，并且在所有浏览器中都失败了。我将首先向您展示一些极简主义的R代码，它会产生问题。然后，我将向您展示它创建的HTML / Javascript。有人可以告诉我，如果我做错了什么，修复可能是什么。

R代码

 require(googleVis)
 df <- data.frame(Postcode =      c("77003","08540","80545"),Tip=c("Houston","Princeton","Red Feather Lakes"))
 M <- gvisMap(df, "Postcode", "Tip",
          options=list(showLine=TRUE,lineWidth=20,lineColor='red'))
 plot(M)
 cat(unlist(M))

生成的HTML / Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MapID88977a251b2</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
  color: #444444;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 75%;
  }
  a {
  color: #4D87C7;
  text-decoration: none;
}
</style>
</head>
<body>
 <!-- Map generated in R 3.2.2 by googleVis 0.5.10 package -->
<!-- Mon Sep  7 16:32:28 2015 -->


<!-- jsHeader -->
<script type="text/javascript">

// jsData 
function gvisDataMapID88977a251b2 () {
var data = new google.visualization.DataTable();
var datajson =
[
 [
 "77003",
"Houston" 
],
[
 "08540",
"Princeton" 
],
[
 "80545",
"Red Feather Lakes" 
] 
];
data.addColumn('string','Postcode');
data.addColumn('string','Tip');
data.addRows(datajson);
return(data);
}

// jsDrawChart
function drawChartMapID88977a251b2() {
var data = gvisDataMapID88977a251b2();
var options = {};
options["showTip"] = true;
options["showLine"] = true;
options["lineWidth"] =     20;
options["lineColor"] = "red";


    var chart = new google.visualization.Map(
    document.getElementById('MapID88977a251b2')
    );
    chart.draw(data,options);


}


// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "map";

// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
  pkgs.push(chartid);

// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartMapID88977a251b2);
})();
function displayChartMapID88977a251b2() {
  var pkgs = window.__gvisPackages = window.__gvisPackages || [];
  var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
  window.clearTimeout(window.__gvisLoad);
  // The timeout is set to 100 because otherwise the container div we are
  // targeting might not be part of the document yet
  window.__gvisLoad = setTimeout(function() {
  var pkgCount = pkgs.length;
  google.load("visualization", "1", { packages:pkgs, callback: function() {
  if (pkgCount != pkgs.length) {
  // Race condition where another setTimeout call snuck in after us; if
  // that call added a package, we must not shift its callback
  return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}

// jsFooter
</script>

<!-- jsChart -->  
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartMapID88977a251b2"></script>

<!-- divChart -->

<div id="MapID88977a251b2" 
  style="width: 500; height: automatic;">
</div>
 <div><span>Data: df &#8226; Chart ID: <a href="Chart_MapID88977a251b2.html">MapID88977a251b2</a> &#8226; <a href="https://github.com/mages/googleVis">googleVis-0.5.10</a></span><br /> 
<!-- htmlFooter -->
<span> 
  R version 3.2.2 (2015-08-14) 
  &#8226; <a href="https://developers.google.com/terms/">Google Terms of Use</a> &#8226; <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/map">Documentation and Data Policy</a>
</span></div>
</body>
</html>

Answer 1

由于文档似乎不正确：

lineWidth

如果showLine为真，则定义线宽（以像素为单位）   类型：数字
  默认： 10

选项lineWidth似乎被忽略，而是设置（当前未记录的）选项lineWeight（它不会默认为10，因此您必须设置此选项。 ..到一个数字> 0）

＆＃13;

google.load("visualization", "1", {packages:["map"]});
google.setOnLoadCallback(drawMap);
function drawMap() {
var arr = [
['postcode','name'],
 [
 "77003",
"Houston" 
],
[
 "08540",
"Princeton" 
],
[
 "80545",
"Red Feather Lakes" 
] 
]
var data = google.visualization.arrayToDataTable(arr);
    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, { showLine: true,lineWeight:20,lineColor:'red',enableScrollWheel:true});

}

＆＃13;

html,body,#map_div{
height:100%;padding:0;margin:0;
}

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="map_div"></div>

＆＃13;

谷歌地图多段线根本不显示

1 个答案: