Question

我使用谷歌图表作为我的应用程序，由于IE8中的一些问题我在我的jsp for IE8中使用谷歌图像折线图，但我需要工具提示我的图表中标记的每个点。为此，我试图找到标记的点的坐标，但我不知道在折线图中找到坐标。请帮我找到坐标，以便在我的图片图表中获得工具提示。这是我生成的图像图表

Answer 1

我将采用的方法是根据Google内联图表创建的图像创建HTML图像映射。使用您的图片，我使用网站http://www.image-maps.com/为您的图表上的每个点创建了一个图片地图。

我给了他们每个点代表的年份ID：

<area shape="rect" id="2009" coords="25,51,38,64" />
<area shape="rect" id="2010" coords="76,58,89,71" />
<area shape="rect" id="2011" coords="129,17,142,30" />
<area shape="rect" id="2012" coords="181,40,194,53"/>

将图像映射与图像相关联。从那里，你可以使用一些jQuery和css来创建一个简单的工具提示，当你鼠标悬停点时显示数据。

工作示例：http://jsfiddle.net/MVFw3/

数据刚刚组成。

以下是代码：

    <head>
    <style type="text/css" media="screen">
    #image_container{
        position:relative;
    }

    #tooltip {
        position:absolute;
        background:#EEEEEE;
        border:1px solid #999999;
        padding:3px;
        display:none;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        var data = {'2009':100, '2010':80, '2011':200, '2012': 150};

        function mapOnMouseOver(obj) {

            //get coordinates
            coordArray = obj.coords.split(",");
            var x = parseInt(coordArray[0]) + 15;
            var y = parseInt(coordArray[1]) + 15;
            var year = obj.id;
            var html = year + ": " + data[year];

            $('#tooltip').html(html);
            $('#tooltip').css({'left':x,'top':y,'display':'inline'});
        }

        $('area').on('mouseover', function(){
            mapOnMouseOver(this);
        });

        $('area').on('mouseout', function(){
            $('#tooltip').css({'display':'none'});
        });


    });

    </script>
    </head>
    <body>

    <div id="image_container">
        <div id="tooltip"></div>
        <img usemap="#map" src="http://i.stack.imgur.com/N8r4N.png" />
    </div>

    <!-- generated with http://www.image-maps.com/ -->

    <map name="map">
    <area shape="rect" id="2009" coords="25,51,38,64" />
    <area shape="rect" id="2010" coords="76,58,89,71" />
    <area shape="rect" id="2011" coords="129,17,142,30" />
    <area shape="rect" id="2012" coords="181,40,194,53"/>
    </map>


    </body>

编辑：是的，您可以动态创建Google内嵌图像的图像映射。 Google现在提供了一个参数，根据您的数据为您提供绘制的折线图的坐标。它以JSON格式返回信息。您需要获取用于创建图表的URL，并附加“＆amp; chof = json”。

以下是解释此问题的文档：https://developers.google.com/chart/image/docs/json_format

例如，这个网址 http://chart.apis.google.com/chart?cht=lc&chxs=0N f0z ，000000＆安培; CHS = 219x102＆安培; chtt =安培;反馈网站0,0,166.7＆安培; CHCO = 1423F7,15CC08，F9FF4D，7A7AFF＆安培; CHF = C，LG，0，FFFFFF ，1，FFFFFF，0 | BG，S，FFFFFF＆安培; CHD = T：36,24,90,42＆安培; CHL = 2009 | 2010 | 2011 | 2012＆安培; CHOF = JSON 将返回此JSON

{
   "chartshape":[
     {
     "name":"axis0_0",
     "type":"RECT",
     "coords":[
        1,
        88,
        26,
        96
     ]
     },
     {
     "name":"axis0_1",
     "type":"RECT",
     "coords":[
        65,
        88,
        90,
        96
     ]
     },
     {
     "name":"axis0_2",
     "type":"RECT",
     "coords":[
        129,
        88,
        154,
        96
     ]
     },
     {
     "name":"axis0_3",
     "type":"RECT",
     "coords":[
        193,
        88,
        218,
        96
     ]
     },
     {
     "name":"line0",
     "type":"POLY",
     "coords":[
        12,
        61,
        76,
        68,
        140,
        32,
        204,
        58,
        208,
        62,
        144,
        36,
        80,
        72,
        16,
        65
     ]
     }
   ]
}

关键信息包含在poly类型中。这些是折线图中线条的坐标。诀窍是将这些坐标转换为数据点。

坐标的格式为x，y，x，y，x，y ......等。坐标的前半部分绘制线，而后半部分环回以完成线。我们只需要坐标的前半部分。

我们将采用那些代表数据点中心点的那些。我们可以使用形状类型“circle”使用形状类型“circle”，使用中心的x，y坐标，以及半径为5像素来制作图像贴图，以便为鼠标移动提供更多区域。

jQuery的getJSON函数可以获取坐标。我不得不猜测你用来创建原始图像图表的值。

var src = "http://chart.apis.google.com/chart?cht=lc&chxs=0N*f0z*,000000&chs=219x102&chtt=&chxr=0,0,166.7&chco=1423F7,15CC08,F9FF4D,7A7AFF&chf=c,lg,0,FFFFFF,1,FFFFFF,0|bg,s,FFFFFF&chd=t:36,24,90,42&chl=2009|2010|2011|2012";
$('#chartImage').attr('src',src);

var JsonUrl = src + "&chof=json";

$.getJSON(JsonUrl,function(output){
    $.each(output.chartshape,function(){
        if (this.type==="POLY") {
        var outerThis = this;
        $.each(this.coords, function(index,value){
            if (isEven(index)&&index<outerThis.coords.length/2) {
                var x = outerThis.coords[index];
                var y = outerThis.coords[index+1];
                var radius = 5;
                var coords = x + "," + y + "," + radius;
                var html = '<area id="' + index/2 + '" shape="circle" coords="' + coords + '" />';
                $('map').attr('name','map').append(html);
            }

        });

    }

    });  // end each

这将创建此HTML图像映射并将其插入页面：

<map name="map">
  <area coords="12,61,5" shape="circle" id="0">
  <area coords="76,68,5" shape="circle" id="1">
  <area coords="140,32,5" shape="circle" id="2">
  <area coords="204,58,5" shape="circle" id="3">
</map>

Javascript的其余部分：

    $('area').on('mouseover', function(){
        mapOnMouseOver(this);
    });

    $('area').on('mouseout', function(){
        $('#tooltip').css({'display':'none'});
    });

}); // end getJSON


var data = [
        {year: 2009, value: 60},
        {year: 2010, value: 40},
        {year: 2011, value: 150},
        {year: 2012, value: 70}
        ]


function mapOnMouseOver(obj) {

    var id = obj.id
    var year = data[id].year;
    var value =  data[id].value;
    var html = year + ": " + value;
    var coordArray = obj.coords.split(",");
    var x = parseInt(coordArray[0]) + 15;
    var y = parseInt(coordArray[1]) + 15;


    $('#tooltip').html(html);
               $('#tooltip').css({'left':x,'top':y,'display':'inline'});
}

function isEven(n) {
  n = Number(n);
  return n === 0 || !!(n && !(n%2));
}

这是一个有效的演示： http://jsfiddle.net/MVFw3/2/

一个很大的警告：谷歌已经贬低了它的图像图表工具。所以他们可能会在某个时候停止工作。更多信息：http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html

祝你好运！蒂莫西巴曼

如何在javascript中找到图像点的x和y坐标

1 个答案: