在谷歌图表中解释JSON格式

Posted 2021-05-05

我用json数据制作了一个谷歌条形图。但我不明白“c”和“v”是做什么的。

非常高兴，如果有人能给我一个简短的解释，说明它们是什么以及为什么我必须使用它们。

<?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;
?>

答案

Cell = c

值= v（用于单元格值和值值）

您可以使用API​​方法以两种方式创建数据，也可以像文字字符串（json）一样构建数据。后者需要c和v对象属性，因为您可以以不同方式对它们进行排序，它仍然可以工作。

从手册：https://developers.google.com/chart/interactive/docs/reference#DataTable

使用json对象示例。

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财产

rows属性包含一个行对象数组。

每个行对象都有一个名为c的必需属性，该属性是该行中的单元格数组。它还有一个可选的p属性，用于定义要分配给整行的任意自定义值的映射。如果您的可视化支持任何行级属性，它将描述它们;否则，此属性将被忽略。

细胞对象

表中的每个单元格都由具有以下属性的对象描述：

v [可选]单元格值。数据类型应与列数据类型匹配。如果单元格为null，则v属性应该为null，尽管它仍然可以具有f和p属性。

所有这些都可以在上面的文档链接中找到。