动态 Google 图表的图像地图
我正在使用 Google 图表。现在我想让这些图表的不同部分可单击。为此,我使用这些说明。但问题是我必须对使用 此页面,但我的图表是根据输入数据动态创建的。
如何根据输入数据使所有图表的图像映射代码动态化。
工具在线使用json数据生成地图代码:
<map name='MapName'>
<area name='legend0' shape='RECT' coords='26,0,38,12' href='#' title='Low'>
<area name='legend1' shape='RECT' coords='96,0,108,12' href='#' title='Expired'>
<area name='legend2' shape='RECT' coords='176,0,188,12' href='#' title='Expiring'>
<area name='data0_0' shape='POLY' coords='136,65,196,65,195,67,195,69,195,71,195,73,195,75,194,77,194,79,193,81,193,83,192,85,191,87,190,89,189,91,189,93,188,94,186,96,185,98,184,100,183,101,182,103,180,105,179,106,177,108,176,109,174,110,173,112,171,113,169,114,167,115,166,116,164,117,162,118,160,119,158,120,156,121,154,122,152,122,150,123,148,123,146,124,144,124,142,124,140,124,138,124,136,124,134,124,132,124,129,124,127,124,125,124,123,123,121,123,119,122,117,122,115,121,113,120,111,119,109,119,108,118,106,117,104,116,102,114,101,113,99,112,97,111,96,109,94,108,93,106,91,105,90,103,88,102,87,100,86,98,85,97,84,95,83,93,82,91,81,89,80,87,79,85,79,83,78,81,77,79,77,77,76,75,76,73,76,71,76,69,76,67,76,65,76,63,76,61,76,59,76,57,76,55,77,53,77,51,78,48,78,46,79,45,80,43,80,41,81,39,82,37,83,35,84,33,85,31,87,30,88,28,89,26,90,25,92,23,93,22,95,20,96,19,98,18,100,16,101,15,103,14,105,13,107,12,109,11,110,10,112,9,114,8,116,8,118,7,120,6' href='#' title=''>
<area name='data0_1' shape='POLY' coords='136,65,120,6,122,6,124,6,126,5,128,5,130,5,133,5,135,5,137,5,139,5,141,5,143,5,145,5,147,6,149,6,151,7,153,7,155,8,157,8,159,9,161,10,163,11,164,12,166,13,168,14,170,15,171,16,173,18,175,19,176,20,178,22,179,23,180,25,182,26,183,28,184,30,185,31,187,33,188,35,189,37,190,39,190,40,191,42,192,44,193,46,193,48,194,50,194,52,195,54,195,56,195,58,195,60,195,62,196,64' href='#' title=''>
<area name='label1' shape='RECT' coords='211,35,248,43' href='#' title='Expired'>
<area name='label2' shape='RECT' coords='211,61,250,69' href='#' title='Expiring'>
<area name='label0' shape='RECT' coords='40,87,61,95' href='#' title='Low'>
</map>
谢谢
I am using Google Charts. Now I want to make different parts of these charts clickable. For this I am using these instructions. But problem is that I have to hard code my image map code that is created by using tool on this page but my charts are created dynamically based on input data.
How can I make Image Map code dynamic for All charts based on input data.
Map code generated by Tool online using json data:
<map name='MapName'>
<area name='legend0' shape='RECT' coords='26,0,38,12' href='#' title='Low'>
<area name='legend1' shape='RECT' coords='96,0,108,12' href='#' title='Expired'>
<area name='legend2' shape='RECT' coords='176,0,188,12' href='#' title='Expiring'>
<area name='data0_0' shape='POLY' coords='136,65,196,65,195,67,195,69,195,71,195,73,195,75,194,77,194,79,193,81,193,83,192,85,191,87,190,89,189,91,189,93,188,94,186,96,185,98,184,100,183,101,182,103,180,105,179,106,177,108,176,109,174,110,173,112,171,113,169,114,167,115,166,116,164,117,162,118,160,119,158,120,156,121,154,122,152,122,150,123,148,123,146,124,144,124,142,124,140,124,138,124,136,124,134,124,132,124,129,124,127,124,125,124,123,123,121,123,119,122,117,122,115,121,113,120,111,119,109,119,108,118,106,117,104,116,102,114,101,113,99,112,97,111,96,109,94,108,93,106,91,105,90,103,88,102,87,100,86,98,85,97,84,95,83,93,82,91,81,89,80,87,79,85,79,83,78,81,77,79,77,77,76,75,76,73,76,71,76,69,76,67,76,65,76,63,76,61,76,59,76,57,76,55,77,53,77,51,78,48,78,46,79,45,80,43,80,41,81,39,82,37,83,35,84,33,85,31,87,30,88,28,89,26,90,25,92,23,93,22,95,20,96,19,98,18,100,16,101,15,103,14,105,13,107,12,109,11,110,10,112,9,114,8,116,8,118,7,120,6' href='#' title=''>
<area name='data0_1' shape='POLY' coords='136,65,120,6,122,6,124,6,126,5,128,5,130,5,133,5,135,5,137,5,139,5,141,5,143,5,145,5,147,6,149,6,151,7,153,7,155,8,157,8,159,9,161,10,163,11,164,12,166,13,168,14,170,15,171,16,173,18,175,19,176,20,178,22,179,23,180,25,182,26,183,28,184,30,185,31,187,33,188,35,189,37,190,39,190,40,191,42,192,44,193,46,193,48,194,50,194,52,195,54,195,56,195,58,195,60,195,62,196,64' href='#' title=''>
<area name='label1' shape='RECT' coords='211,35,248,43' href='#' title='Expired'>
<area name='label2' shape='RECT' coords='211,61,250,69' href='#' title='Expiring'>
<area name='label0' shape='RECT' coords='40,87,61,95' href='#' title='Low'>
</map>
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论