使用 JSON 创建 HTML

Question

我想成为我的google charts clickable。

我在我的 Google 图表 URL 中使用 chof=json 来获取 JSON 格式的坐标：

{"chartshape":[{"name":"data0_0","type":"POLY","coords":[126,51,192,51,191,53,191,55,191,57,191,60,190,62,190,64,190,66,189,69,188,71,188,73,187,75,186,77,185,79,184,81,183,84,181,85,180,87,179,89,178,91,176,93,175,95,173,96,171,98,170,100,168,101,166,103,164,104,162,105,160,106,158,108,156,109,154,110,152,111,150,112,148,113,146,113,144,114,141,115,139,115,137,115,135,116,132,116,130,116,128,116,125,117,123,116,121,116,119,116,116,116,114,115,112,115,110,115,107,114,105,113,103,113,101,112,99,111,97,110,95,109,92,108,91,106,89,105,87,104,85,103,83,101,81,100,80,98,78,96,76,95,75,93,73,91,72,89,71,87,70,85,68,83,67,81,66,79,65,77,64,75,63,73,63,71,62,69,61,66,61,64,61,62,60,60,60,57,60,55,60,53,60,50,60,48,60,46,60,44,60,41,61,39,61,37,61,35,62,32,63,30,63,28,64,26,65,24,66,22,67,20,68,17,70,16,71,14,72,12]},{"name":"data0_1","type":"POLY","coords":[126,51,72,12,73,10,75,8,76,6,78,5,80,3,81,1,83,0,85,-2,87,-3,89,-4,91,-5,92,-7,95,-8,97,-9,99,-10,101,-11,103,-12,105,-12,107,-13,110,-14,112,-14,114,-14,116,-15,119,-15,121,-15,123,-15,125,-16,128,-15,130,-15,132,-15,135,-15,137,-14,139,-14,141,-14,144,-13,146,-12,148,-12,150,-11,152,-10,154,-9,156,-8,158,-7,160,-5,162,-4,164,-3,166,-2,168,0,170,1,171,3,173,5,175,6,176,8,178,10,179,12,180,14,181,16,183,17,184,20,185,22,186,24,187,26,188,28,188,30,189,32,190,35,190,37,190,39,191,41,191,44,191,46,191,48,192,50]},{"name":"label1","type":"RECT","coords":[207,13,235,21]},{"name":"label0","type":"RECT","coords":[19,81,45,89]}]}

现在我使用this page 上的工具创建上述 json 代码的 HTML 版本以放置在我的 HTML 页面中：

<map name='ID_HERE'>
  <area name='data0_0' shape='POLY' coords='126,51,192,51,191,53,191,55,191,57,191,60,190,62,190,64,190,66,189,69,188,71,188,73,187,75,186,77,185,79,184,81,183,84,181,85,180,87,179,89,178,91,176,93,175,95,173,96,171,98,170,100,168,101,166,103,164,104,162,105,160,106,158,108,156,109,154,110,152,111,150,112,148,113,146,113,144,114,141,115,139,115,137,115,135,116,132,116,130,116,128,116,125,117,123,116,121,116,119,116,116,116,114,115,112,115,110,115,107,114,105,113,103,113,101,112,99,111,97,110,95,109,92,108,91,106,89,105,87,104,85,103,83,101,81,100,80,98,78,96,76,95,75,93,73,91,72,89,71,87,70,85,68,83,67,81,66,79,65,77,64,75,63,73,63,71,62,69,61,66,61,64,61,62,60,60,60,57,60,55,60,53,60,50,60,48,60,46,60,44,60,41,61,39,61,37,61,35,62,32,63,30,63,28,64,26,65,24,66,22,67,20,68,17,70,16,71,14,72,12' href='#'  title=''>
  <area name='data0_1' shape='POLY' coords='126,51,72,12,73,10,75,8,76,6,78,5,80,3,81,1,83,0,85,-2,87,-3,89,-4,91,-5,92,-7,95,-8,97,-9,99,-10,101,-11,103,-12,105,-12,107,-13,110,-14,112,-14,114,-14,116,-15,119,-15,121,-15,123,-15,125,-16,128,-15,130,-15,132,-15,135,-15,137,-14,139,-14,141,-14,144,-13,146,-12,148,-12,150,-11,152,-10,154,-9,156,-8,158,-7,160,-5,162,-4,164,-3,166,-2,168,0,170,1,171,3,173,5,175,6,176,8,178,10,179,12,180,14,181,16,183,17,184,20,185,22,186,24,187,26,188,28,188,30,189,32,190,35,190,37,190,39,191,41,191,44,191,46,191,48,192,50' href='#'  title=''>
  <area name='label1' shape='RECT' coords='207,13,235,21' href='#'  title=''>
  <area name='label0' shape='RECT' coords='19,81,45,89' href='#'  title=''>
</map>

如何获得这种 JSON 格式，然后在运行/运行时将其转换为 HTML。我希望我的脚本创建 Google 图表 URL，然后以 JSON 格式本身获取坐标，然后将其转换为 HTML 本身并放置在我的网页本身中。

Answer 1

使用他们的代码。检查 javascript 函数 makeMap() 的 page 源代码并根据需要对其进行修改以生成页面的图像映射代码。

具体来说，您需要构建一个 URL 来生成图形，并构建第二个 URL 包含 '&chof=json' 属性来生成 JSON，然后将返回的 JSON 提供给 makeMap() 函数以生成图像映射代码.

我添加了他们的 javascript 代码的 PHP 版本示例：

// 假设 $url 包含您为图表构建的 URL // 您必须将 LESS_THAN 替换为“小于”打开标记符号 //（它被这个网站剥离了） // 您必须提供 MAP_NAME、YOUR_HREF 和 YOUR_TITLE // 获取 JSON $fh = fopen($url . '&chof=json','r'); 而 (!feof($fh)) { $json .= fread($fh,1048576); } fclose($fh); $json_decoded = json_decode($json); // 构建地图元素 $map_string = 'LESS_THANmap name="YOUR_MAP_NAME" id="YOUR_MAP_NAME">' 。 "\n"; foreach ($json_decoded->chartshape as $index => $element) { $map_string .= 'LESS_THANarea ' . 'name="' . $element->name . '" ' . 'id="' . $element->name . '" ' . 'shape="' . $element->type . '" ' . 'coords="' . implode(',', $element->coords) . '" ' . 'href="' . YOUR_HREF . '" ' . 'title="' . YOUR_TITLE . '" ' . '>'; } $map_string .= 'LESS_THAN/map>'; // 将地图元素添加到输出 打印 $map_string;

Answer 2

您应该查看 jQuery Templates http://api.jquery.com/category/plugins/templates/，它允许您使用 JSON 数据并根据数据显示模板