בניית טבלאות HTML עם “ויזואליזציה של גוגל API”

מה דעתך על הצגת הנתונים שלך ייערכו ויזואלית יפה, ועדיין להיות מסוגל למיין, לעמודים, הכל נבנה באופן דינמי, מבלי לכתוב אף “טבלת HTML”?

מצגת

את ויזואליזציה של גוגל API מציג ערכת טכניקות להצגת הנתונים בקלות ובמהירות. בפוסט הזה נוכל לראות את ה תרשימי שולחן.

פעולה

דוגמה
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?PHP
<html לאנג="pt-BR">
  <ראש>    
    <מאשר קידוד="ISO-8859-1" />
    <סוג סקריפט=' טקסט/javascript ' src=' שנת https://www.google.com/jsapi></תסריט>
    <סוג סקריפט=' טקסט/javascript '>
      Google.טעון(חזותי, 1, {חבילות:[טבלה]});
      Google.התקשרות חזרה(שרוך, חדש);
      פונקציה שרוך, חדש() {
        Var תאריך = חדש Google.חזותי.Datatable();
        תאריך.הוספה לעמודה(חרוזת, שם);
        תאריך.הוספה לעמודה(ספר, משכורת);
        תאריך.הוספה לעמודה(בוליאני, ' במשרה מלאה ');
        תאריך.שרון, ראש השנה([
          [ג'ון,  {V: 2000, F: ' R $2,000.00 '}, נכון],
          [מרי, {V: 5000, F: ' R $5,000.00 '}, False],
          [אליס, {V: 1000, F: ' R $1,000.00 '}, נכון],
          [בוב,   {V: 1500, F: ' R $1,500.00 '}, נכון]
        ]);
        Var טבלה = חדש Google.חזותי.שולחן, חדש(מסמך.גטלביגבייד(' table_div '));
        טבלה.צייר(תאריך, {מספר הצגת שורות: נכון});
      }
    </תסריט>
  </ראש>
  <הגוף>
    <מזהה div=' table_div '></Div>
  </הגוף>
</Html>
?>

(1) בקוד שלעיל, שימו לב שהתחלנו בקריאה ל-API של Google JavaScript (JSAPI, פנסילבניה).

(2) לאחר מכן, אנו נושאים את ה ויזואליזציה, השנה החדשה, בגירסה 1.0, והספריה שלך שולחן’.

(3) אנו משתמשים בפונקציה JSAPI התקשרות חזרה הקצאת המטפל שרוך, חדש (או שם אחר שברצונך), שלמעשה צריך ליצור ולהגדיר את הטבלה.

(4) את Datatable מומר לטבלת HTML שבה כל עמודה חייבת להיות מאותו סוג של נתונים נתמכים (חרוזת, בוליאני, ספר, ועוד).

(5) השתמש הוספה לעמודה() כדי ליצור עמודה, עובר כפרמטר הסוג והשם של הנתונים.

(6) השתמש שרון, ראש השנה() כדי ליצור את שורות הטבלה, IE, הזן את הנתונים שלך. קווים מוגבלים בסוגריים [] והמידע של כל תא מופרד באמצעות פסיק. שים לב שיש סימון “V” ו “F”, שאני מניח שפירושו ערך ושדה, בהתאמה, IE, o valor real da célula e o rótulo a ser exibido no campo. Isto se faz necessário, pois, como o a referida coluna é deinteiros”, então a correta ordenação poderia ficar prejudicada se fosse tida como strings.

(7) סוף סוף, informamos em qual DIV o desenho da tabela será renderizado (table_div) ומוכן!

בפועל

O código acima gera a seguinte Tabela HTML:

Não é mesmo interessante? Todo HTML da tabela foi criado sem que precisássemos escrever um só TABLE, TR ou TD. בטח, esta foi apenas uma demonstração. Você pode aprofundar seu conhecimento e descobrir outras possibilidades de configuração para trabalhar com as tabelas através da תרשימי שולחן.

Galeria

Existe ainda inúmeros outros recursos interessantes que o Google Charts Gallery oferece. קיימים מגוון תרשימים המותאמים במיוחד לצורכי הדמיה של נתונים. גרפיקה מבוססת על טכנולוגיית HTML5/SVG טהורה (אימוץ VML לגירסאות ישנות יותר של IE), כך שתוספים אינם נחוצים. תרשימים אלה ניתן להוסיף לדף שלך רק כמה צעדים פשוטים.

גופנים

סה כ כניסות: 5923

תשאיר הודעה

כתובת הדוא ל שלך לא יפורסם. שדות חובה מסומנים *