JS中google chart的小问题(PS:钓鱼岛是中国的!)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsapi"></script>

<script type="text/javascript">
  var arrayName = ${questionName};
  var arrayX = ${arrayStrX};

          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
              var data = google.visualization.arrayToDataTable(arrayX);              var options = {
                 title: arrayName,
              hAxis: {
                  //title: '检测时间',
                  titleTextStyle: {
                     //color: 'red'
                     }
              }
              };            var chart = new google.visualization.LineChart(document.getElementById('container'));
            chart.draw(data, options);
          }
</script>
<script type="text/javascript">
  var arrayName2 = ${questionName2};
  var arrayX2 = ${arrayStrX2};

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart2);
      function drawChart2() {
        var data = google.visualization.arrayToDataTable(arrayX2);         var options = {
          title: arrayName2
        };         var chart = new google.visualization.LineChart(document.getElementById('container2'));
        chart.draw(data, options);
      }
</script>
</head>
<body>
<table width="100%">
<tr>
<td align="center"><font color="red">${message}</font></td>
</tr>
</table>
<div id="container" style="min-width: 300px; height: 250px; margin: 0 auto"></div>
<div id="container2" style="min-width: 300px; height: 250px; margin: 0 auto"></div>
</body>
</html>

或者是：showValue:true? 有没有这种属性呢

看了下google chart的api，没有显示全部的配置，不显示tooltip的配置倒是有你要显示全部的点只好自己操作canvas对象或者vml绘制tooltip了。最简单的就是获取画出的路径，然后用js+div模拟tooltip

绘图的插件很多，主要是找出路径的内容就好绘图或者模拟了帮你大概弄了下
google chart显示全部顶点的tooltip

1.2.在同一个页面内，写了2个折线图。第一张是在IE9下的效果，有些不正常。
第二张是在FF下的效果。正常显示。
这是哪里的问题呢？

发最后在浏览器得到的HTML代码看看，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/sremrV1/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="/sremrV1/js/jsapi"></script>
<style type="text/css">
.pop {
font-size: 12px;
width: 120px;
height: 50px;
position: absolute;
z-index: 10000
}
/*可以增加背景图片什么的美化一下tooltip*/
</style>
<script type="text/javascript">
  var arrayName = '术后开始化疗时间：';
  var arrayX = [['日期', '数值'],['1991-02-13',1.0],['1999-01-20',33.0],['1999-04-01',2.0],['2004-02-11',44.0],['2004-03-06',66.0],['2004-04-15',11.0],['2004-05-12',111.0],['2004-06-04',11.0],['2005-03-01',1.0],['2005-04-01',12.0],['2005-06-02',11.0],['2005-06-10',99.0],['2005-07-01',22.0],['2005-08-05',33.0],['2012-01-05',16.0],['2012-01-16',18.0],['2012-01-16',16.0],['2012-01-30',19.0],['2012-09-01',11.0],['2012-09-01',12.0],['2012-09-01',11.0],['2012-09-02',12.0],['2012-09-13',22.0],['2018-04-18',23.0]];          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          var data=arrayX;
          function getPath1() {
              var doc = document.getElementById('container').getElementsByTagName('iframe')[0].contentWindow.document;
              if (doc.readyState == 'complete') {                clearInterval(window.timer);
              var ie = !!document.all, line = doc.getElementsByTagName(ie ? 'shape' : 'path');
              if (ie) {
                  for (var i = 0, j = line.length; i < j; i++)
                      if (line[i].getAttribute('logicalname') == 'line#0') {
                          line = line[i]; break;
                          }
                     }
                  else line = line[0];
                 drawTooltip(ie ? line.path.value : line.getAttribute('d'), ie);
              }

              }
          function drawTooltip(p, ie) {
          p = p.toLowerCase().replace('m', '').replace('e', '').replace(/l/g, ',');
          var points = p.split(','), pop, dv = document.getElementById('container'), idx = 1,dataItem;
          for (var i = 0, j = points.length; i < j; i += 2) {
          pop = document.createElement('div');
          pop.className = 'pop';
          pop.style.left = points[i] + 'px';
          pop.style.top = points[i + 1] + 'px';
          dataItem = data[idx];
          idx++;
          pop.innerHTML = dataItem[1];
          dv.appendChild(pop);
      }
       }
          function drawChart() {
              var data = google.visualization.arrayToDataTable(arrayX);              var options = {
                 title: arrayName,
                 tooltip: {
      trigger: ''
          },
              hAxis: {
                  //title: '检测时间',
                  titleTextStyle: {
                     //color: 'red'
                      }
              }
              };              var chart = new google.visualization.LineChart(document.getElementById('container'));
              chart.draw(data, options);
              window.timer = setInterval(getPath, 500);
          }
</script>
<script type="text/javascript">
  var arrayName2 = 'WBC：';
  var arrayX2 = [['日期', '数值'],['2012-01-07',1.0],['2012-09-01',11.0]];

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart2);       var data2=arrayX2;
          function getPath2() {
              var doc = document.getElementById('container2').getElementsByTagName('iframe')[0].contentWindow.document;
              if (doc.readyState == 'complete') {                clearInterval(window.timer);
              var ie = !!document.all, line = doc.getElementsByTagName(ie ? 'shape' : 'path');
              if (ie) {
                  for (var i = 0, j = line.length; i < j; i++)
                      if (line[i].getAttribute('logicalname') == 'line#0') {
                          line = line[i]; break;
                          }
                     }
                  else line = line[0];
                 drawTooltip2(ie ? line.path.value : line.getAttribute('d'), ie);
              }
              }
          function drawTooltip2(p, ie) {
          p = p.toLowerCase().replace('m', '').replace('e', '').replace(/l/g, ',');
          var points = p.split(','), pop, dv = document.getElementById('container2'), idx = 1,dataItem;
          for (var i = 0, j = points.length; i < j; i += 2) {
          pop = document.createElement('div');
          pop.className = 'pop';
          pop.style.left = points[i] + 'px';
          pop.style.top = points[i + 1] + 'px';
          dataItem = data2[idx];
          idx++;
          pop.innerHTML = dataItem[1];
          dv.appendChild(pop);
      }
       }
      function drawChart2() {
        var data = google.visualization.arrayToDataTable(arrayX2);         var options = {
          title: arrayName2,
          tooltip: {
  trigger: ''
      }
        };         var chart = new google.visualization.LineChart(document.getElementById('container2'));
        chart.draw(data, options);
        window.timer = setInterval(getPath, 500);
      }
      function getPath() {
       getPath1();
       getPath2();
      }
</script>
</head>
<body>
<table width="100%">
<tr>
<td align="center"><font color="red"></font></td>
</tr>
</table>
<div id="container" style="min-width: 300px; height: 250px; margin: 0 auto"></div>
<div id="container2" style="min-width: 300px; height: 250px; margin: 0 auto"></div>

</body>
</html>这是IE右键查看源代码的代码。

注意看注释的地方，修改了下计时器，你原来的代码没有停止计时器，IE下的路径顶点用改正则获取了，IE会多一些空格什么其他东西出来，麻烦，多点的时候IE会用空格分隔路径，IE9有些是使用的是svg，<script type="text/javascript">
        var arrayName = '术后开始化疗时间：';
        var arrayX = [['日期', '数值'], ['1991-02-13', 1.0], ['1999-01-20', 33.0], ['1999-04-01', 2.0], ['2004-02-11', 44.0], ['2004-03-06', 66.0], ['2004-04-15', 11.0], ['2004-05-12', 111.0], ['2004-06-04', 11.0], ['2005-03-01', 1.0], ['2005-04-01', 12.0], ['2005-06-02', 11.0], ['2005-06-10', 99.0], ['2005-07-01', 22.0], ['2005-08-05', 33.0], ['2012-01-05', 16.0], ['2012-01-16', 18.0], ['2012-01-16', 16.0], ['2012-01-30', 19.0], ['2012-09-01', 11.0], ['2012-09-01', 12.0], ['2012-09-01', 11.0], ['2012-09-02', 12.0], ['2012-09-13', 22.0], ['2018-04-18', 23.0]];

        var data = arrayX;
        function getPath1(containerID) {
            var doc = document.getElementById('container').getElementsByTagName('iframe')[0].contentWindow.document;
            if (doc.readyState == 'complete') {
                clearInterval(window.timer1);//////////////////
                var vml= doc.body.innerHTML.toLowerCase().indexOf('<svg')==-1, line = doc.getElementsByTagName(vml ? 'shape' : 'path');
                if (vml) {
                    for (var i = 0, j = line.length; i < j; i++)
                        if (line[i].getAttribute('logicalname') == 'line#0') {
                            line = line[i]; break;
                        }
                }
                else line = line[0];
                drawTooltip1(vml ? line.path.value : line.getAttribute('d'));
            }

        }
        function drawTooltip1(p) {
            var points = p.match(/\d+(\.\d+)?/g), pop, dv = document.getElementById('container'), idx = 1, dataItem;//////////
            for (var i = 0, j = points.length; i < j; i += 2) {
                pop = document.createElement('div');
                pop.className = 'pop';
                pop.style.left = points[i] + 'px';
                pop.style.top = points[i + 1] + 'px';
                dataItem = data[idx];
                idx++;
                pop.innerHTML = dataItem[1];
                dv.appendChild(pop);
            }
        }
        function drawChart() {
            var data = google.visualization.arrayToDataTable(arrayX);

            var options = {
                title: arrayName,
                tooltip: {
                    trigger: ''
                },
                hAxis: {
                    //title: '检测时间',
                    titleTextStyle: {
                    //color: 'red'
                }
            }
        };

        var chart = new google.visualization.LineChart(document.getElementById('container'));
        chart.draw(data, options);
        window.timer1 = setInterval(getPath1, 500); /////////////////
    }
        var arrayName2 = 'WBC：';
        var arrayX2 = [['日期', '数值'], ['2012-01-07', 1.0], ['2012-09-01', 11.0]];



        var data2 = arrayX2;
        function getPath2() {
            var doc = document.getElementById('container2').getElementsByTagName('iframe')[0].contentWindow.document;
            if (doc.readyState == 'complete') {
                clearInterval(window.timer2);
                var vml = doc.body.innerHTML.toLowerCase().indexOf('<svg')==-1, line = doc.getElementsByTagName(vml ? 'shape' : 'path');//////////
                if (vml) {
                    for (var i = 0, j = line.length; i < j; i++)
                        if (line[i].getAttribute('logicalname') == 'line#0') {
                            line = line[i]; break;
                        }
                }
                else line = line[0];
                drawTooltip2(vml ? line.path.value : line.getAttribute('d'));
            }
        }
        function drawTooltip2(p) {
            var points = p.match(/\d+(\.\d+)?/g), pop, dv = document.getElementById('container2'), idx = 1, dataItem;////////////
            for (var i = 0, j = points.length; i < j; i += 2) {
                pop = document.createElement('div');
                pop.className = 'pop';
                pop.style.left = points[i] + 'px';
                pop.style.top = points[i + 1] + 'px';
                dataItem = data2[idx];
                idx++;
                pop.innerHTML = dataItem[1];
                dv.appendChild(pop);
            }
        }
        function drawChart2() {
            var data = google.visualization.arrayToDataTable(arrayX2);

            var options = {
                title: arrayName2,
                tooltip: {
                    trigger: ''
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('container2'));
            chart.draw(data, options);
            window.timer2 = setInterval(getPath2, 500);
        }

        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(function () { drawChart(); drawChart2() });
    </script>

调试易

JS中google chart的小问题(PS:钓鱼岛是中国的!)

解决方案 »