Создать HTML, используя JSON - PullRequest
Новая
       7

Создать HTML, используя JSON

0 голосов
/ 02 апреля 2011

Я хочу, чтобы мои диаграммы Google активировались .

Я использую chof = json в URL-адресе моей диаграммы Google для получения координат в формате 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]}]}

Теперь я использовал инструмент на этой странице для создания HTML-версии вышеуказанного кода JSON для размещения на моей странице 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 на лету / во время выполнения.Я хочу, чтобы мой сценарий создал URL-адрес Google Chart, затем получил координаты в самом формате JSON, а затем преобразовал его в сам HTML и поместил в саму мою веб-страницу.

Ответы [ 2 ]

1 голос
/ 04 апреля 2011

Используйте их код.Проверьте исходный код page для функции javascript makeMap () и при необходимости измените его, чтобы сгенерировать код imagemap для вашей страницы.

В частности, вам потребуется создать один URL для созданияграфический объект и второй URL-адрес, который содержит атрибут «& chof = json» для создания JSON, а затем передает возвращенный JSON в функцию makeMap () для создания кода imagemap.

Я добавил примерPHP-версия их кода JavaScript: 

// 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;
0 голосов
/ 02 апреля 2011

Вы должны оформить заказ jQuery Templates http://api.jquery.com/category/plugins/templates/, который позволяет вам использовать данные JSON и отображать шаблоны на основе данных

...