1

Im using google charts for my application, due to some issues in IE8 im using google image line charts in my jsp for IE8, but i need tooltip for every points marked in my charts. For that i've trying to find the coordinates of the points marked, but i dont have any idea to find the cordinates in line charts. Please help me to find the coordinates to get the tooltip in my image charts. Here is my generated image chart

enter image description here

4

1 回答 1

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，并附加“&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=&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&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 ... 等。坐标的前半部分绘制直线，而后半部分则循环返回以完成直线。我们只需要坐标的前半部分。

我们将采用代表数据点中心点的那些。我们可以使用形状类型“圆形”来制作图像映射，使用 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

祝你好运！蒂莫西·巴曼

于 2013-11-06T21:30:21.337 回答