如何在 Treemap 图表上循环

Question

我有一个树状图代码，这是工作，根据我的期望显示树状图。但是这些值仍然存在于硬代码中。我想尽可能多地循环数据库中的现有数据。使用 for，while but 我运行它，我得到一个错误

Uncaught SyntaxError: Unexpected token for

这是我的代码

function drawChart(){
                    var data = google.visualization.arrayToDataTable([
                        ['Location', 'Parent' , 'Size', 'Color'],
                        ['Cabang',null,0,0],
                        [
                        for (i=0; i<0; i++){
                            console.log([dataFromPHP[i].provinsi,'Cabang',0,0],);
                        ],

                        [
                        for (j=0; j<0; j++){
                            console.log([dataFromPHP[j].kode_sales ,dataFromPHP[j].provinsi ,dataFromPHP[j].gaji ,dataFromPHP[j].count],);
                        ], ]);

这是我的工作代码

function drawChart(){
                    var data = google.visualization.arrayToDataTable([
                        ['Location', 'Parent' , 'Size', 'Color'],
                        ['Cabang',null,0,0],
                        [dataFromPHP[0].provinsi,'Cabang',0,0],
                        [dataFromPHP[1].provinsi,'Cabang',0,0],
                        [dataFromPHP[2].provinsi,'Cabang',0,0],
                        [dataFromPHP[0].kode_sales ,dataFromPHP[0].provinsi ,3 ,dataFromPHP[0].count],
                        [dataFromPHP[1].kode_sales ,dataFromPHP[1].provinsi ,1 ,dataFromPHP[1].count],
                        [dataFromPHP[2].kode_sales ,dataFromPHP[2].provinsi ,1 ,dataFromPHP[2].count], ]);

我应该怎么做才能以 Treemap 格式制作循环值？提前致谢

这是我的 JSON 文件

[
{
    "provinsi": "Jawa Tengah",
    "pulau": "Jawa",
    "kode_sales": "SAL04",
    "gaji": "913",
    "count": "3"
},
{
    "provinsi": "Jawa Barat",
    "pulau": "Jawa",
    "kode_sales": "CLI02",
    "gaji": "500",
    "count": "1"
},
{
    "provinsi": "Jawa Timur",
    "pulau": "Jawa",
    "kode_sales": "SAL99",
    "gaji": "125",
    "count": "1"
}

]

Answer 1

首先，您必须先完成一个陈述，然后再开始另一个陈述

arrayToDataTable 中间不能有 for 循环

至于 for 循环，这永远不会运行 --> for (i=0; i<0; i++){

i 从 0 开始，并且应该运行只要 i < 0 -- 所以它在

结束

试试这个...

var data = google.visualization.arrayToDataTable([
  ['Location', 'Parent' , 'Size', 'Color'],
  ['Cabang', null, 0, 0]
]);

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].provinsi, 'Cabang', 0, 0]);
}

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].kode_sales, dataFromPHP[i].provinsi, dataFromPHP[i].gaji, dataFromPHP[i].count]);
}

编辑

而不是使用 arrayToDataTable，显式定义 DataTable
确保使用正确的类型

var data = new google.visualization.DataTable();
data.addColumn('string', 'Location');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Size');
data.addColumn('number', 'Color');

data.addRow(['Cabang', null, 0, 0]);

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].provinsi, 'Cabang', 0, 0]);
}

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].kode_sales, dataFromPHP[i].provinsi, dataFromPHP[i].gaji, dataFromPHP[i].count]);
}

编辑 2

因为数字在 JSON 中存储为字符串，
将数字包装在 parseFloat（浮动精度）或 parseInt（整数）

中

例如--> parseFloat(dataFromPHP[i].gaji)

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].kode_sales, dataFromPHP[i].provinsi, parseFloat(dataFromPHP[i].gaji), parseInt(dataFromPHP[i].count)]);
}

如何在 Treemap 图表上循环

How to looping on Treemap chart

javascript

charts

google-visualization

treemap