使用 JSON 创建 HTML

Question

我想让我的 Google 图表可点击。

我在 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]}]}

现在我在 此页面 创建上述 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 Chart URL，然后获取 JSON 格式的坐标，然后将其转换为 HTML 本身并放置在我的网页本身中。

Answer 1

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

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

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

// Assumes $url contains the URL you built for your chart
// You must replace LESS_THAN with the "less than" open tag symbol
// (It gets stripped out by this site)
// You must supply MAP_NAME, YOUR_HREF and YOUR_TITLE

// Get the JSON
$fh = fopen($url . '&chof=json','r');
while (!feof($fh)) {
    $json .= fread($fh,1048576);
}
fclose($fh);

$json_decoded = json_decode($json);

// Build the map element
$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>';

// Add the map element to the output
print $map_string;

Answer 2

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