使用JSON創建HTML

Question

我想讓我的google charts clickable。

我用我的谷歌圖表網址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

使用自己的代碼JSON數據和顯示模板。檢查javascript函數makeMap（）的page源代碼並根據需要對其進行修改，以生成頁面的圖像代碼。

具體來說，您需要構造一個URL以生成圖形，第二個URL包含'& chof = json'屬性以生成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/它允許你消耗基於數據