2017-12-24 4 views
1

jsonのデータを使ってGoogleの棒グラフを作成しました。 しかし、私は "c"と "v"のことを理解していません。GoogleのチャートでJSON形式を説明します

誰かが私が彼らが何であるか、なぜ私がそれらを使用しなければならないかについての短い説明を与えることができれば、とても幸せでしょうか。 (セルの値と値の値の両方に使用)

<?php 
//Balkendiagramm 
$query_barchart = "SELECT COUNT(CASE WHEN name_Gleitzeitrahmen = 'Ja' THEN 1 END) as Ja,COUNT(CASE WHEN name_Gleitzeitrahmen = 'Nein' THEN 1 END)as Nein,quarter(datum) as quartal FROM landrat_dashboard GROUP BY quartal"; 
$result_barchart = mysqli_query($con,$query_barchart); 

$rows_barchart = array(); 
$table_barchart = array(); 
$table_barchart['cols'] = array(

// Hier werden die Namen für die Spalten festgelegt 
// Eine Spalte muss vom Typ String sein, sie repräsentiert den Spalten Titel, 
// die anderen sind vom Typ number, da google-chart Zahlen braucht, um Prozentangaben oder andere Formate untereinander zu vergleichen 
array('label' => 'Quartal', 'type' => 'string'), 
array('label' => 'Anzahl Ja', 'type' => 'number'), 
array('label' => 'Anzahl Nein', 'type' => 'number') 
); 

$rows_barchart = array(); 
while($r = mysqli_fetch_assoc($result_barchart)) { 
    $temp = array(); 
    // Folgende Zeile wird benötigt, um das Diagramm in Teilstücke aufzuteilen. Quasi die erste Zeile einer Tabelle 
    $temp[] = array('v' => (string) $r['quartal']); 

    // Hier werden Werte für jedes Teistück vergeben. Quasi die Zeilen einer Tabelle 
    $temp[] = array('v' => (int) $r['Ja']); 
    $temp[] = array('v' => (int) $r['Nein']); 
    $rows_barchart[] = array('c' => $temp); 
} 

$table_barchart['rows'] = $rows_barchart; 
$jsonTable_barchart = json_encode($table_barchart);// Das Array wird in JSON Format umgewandelt, welches vom google-chart akzeptiert wird. 
//echo $jsonTable_barchart; 
?> 

答えて

1

セル = C

= V

あなたはAPIメソッドを使用して、2つの方法でデータを作成することができますあなたのやり方のようにリテラル文字列(json)からビルドすることができます。後ではcvのオブジェクトプロパティが必要です。これは、それらを別々に注文しても機能するためです。 JSONオブジェクトの例を使用 https://developers.google.com/chart/interactive/docs/reference#DataTable

:マニュアルから

var dt = new google.visualization.DataTable({ 
    cols: [{id: 'task', label: 'Task', type: 'string'}, 
      {id: 'hours', label: 'Hours per Day', type: 'number'}], 
    rows: [{c:[{v: 'Work'}, {v: 11}]}, 
      {c:[{v: 'Eat'}, {v: 2}]}, 
      {c:[{v: 'Commute'}, {v: 2}]}, 
      {c:[{v: 'Watch TV'}, {v:2}]}, 
      {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}] 
    }, 0.6); 

APIメソッドを使用する。

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Task'); 
data.addColumn('number', 'Hours per Day'); 
data.addRows([ 
    ['Work', 11], 
    ['Eat', 2], 
    ['Commute', 2], 
    ['Watch TV', 2], 
    ['Sleep', {v:7, f:'7.000'}] 
]); 

列および細胞

cols

cols: [{id: 'A', label: 'NEW A', type: 'string'}, 
     {id: 'B', label: 'B-label', type: 'number'}, 
     {id: 'C', label: 'C-label', type: 'date'}] 

rows施設

列プロパティは、行オブジェクトの配列を保持しています。

各行オブジェクトには、その行にあるセルの配列であるcという1つの必須プロパティがあります。また、行全体に割り当てる任意のカスタム値のマップを定義するオプションのpプロパティもあります。可視化で行レベルのプロパティがサポートされている場合は、それらのプロパティを記述します。それ以外の場合、このプロパティは無視されます。

v [オプション]セル値:

細胞は

表の各セルは、以下の特性を持つオブジェクトによって記述されるオブジェクト。データ型は列データ型と一致する必要があります。セルがnullの場合、vプロパティはnullになりますが、それでもfpのプロパティを持つことができます。

すべては、上記のドキュメントリンクにあります。

関連する問題