javascript - 将Json以特定格式传递给javascript以渲染图表

Question

我正在研究图表库，

我有 json 格式，它将来自服务器，年和月格式

{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
}

现在我需要以数组格式传递present 和target 值。

数据必须像下面一样传递或解析。

如何在 javascript 和 jquery 中执行此操作？

我尝试了所有可用的解决方案，因为我是 javascript 世界的新手!

预期结果

var legendsText = [["present name1","target name1"]],
jsonFormat = [[18, 18],[15,18],[36, 18]];   

fiddle

这是我们的 friend Eli Gassert 制作的 fiddle ，是最接近的一把

<强> http://http://jsfiddle.net/Yq3DW/126/

但它只加载所有 3 个月的现值

我想要每个名称的当前值和目标值。

例如

name1 链接已点击，图表应加载 name1 的当前状态和全部 3 个月的目标。

name2 链接已点击，图表应加载 name2 的当前状态和全部 3 个月的目标。

name3 链接已点击，图表应加载 name3 的当前状态和全部 3 个月的目标。

我的 JSON 格式是从服务器动态获取的

data={
  "perspective": "something",
  "year": "2014",
  "measures": [
    {
      "id": 1,
      "name": "some name",
      "target": "200",
      "responsiblePerson": null
    },
    {
      "id": 2,
      "name": "some name",
      "target": "100",
      "responsiblePerson": null
    }
  ],
  "values": {
    "jan": [
      {
        "id": 1,
        "name": "name1",
        "present": "18",
        "target": "18",
        "status": "yellow"
      },
      {
        "id": 2,
        "name": "name2",
        "present": "21",
        "target": "22",
        "status": "red"
      },
      {
        "id": 3,
        "name": "name3",
        "present": "50",
        "target": "50",
        "status": "yellow"
      }
    ],
    "feb": [
      {
        "id": 1,
        "name": "name1",
        "present": "18",
        "target": "18",
        "status": "yellow"
      },
      {
        "id": 2,
        "name": "name2",
        "present": "21",
        "target": "22",
        "status": "red"
      },
      {
        "id": 3,
        "name": "name3",
        "present": "50",
        "target": "50",
        "status": "yellow"
      }
    ],
    "mar": [
      {
        "id": 1,
        "name": "name1",
        "present": "18",
        "target": "18",
        "status": "yellow"
      },
      {
        "id": 2,
        "name": "name2",
        "present": "22",
        "target": "22",
        "status": "yellow"
      },
      {
        "id": 3,
        "name": "name3",
        "present": "52",
        "target": "50",
        "status": "yellow"
      }
    ]
  }
}

HTML

<div id="chart"></div>

JS

    var legendsText = [];
for(var i = 0; i != data.measures.length; ++i)
    legendsText.push(data.measures[i].name);

legendsText = [legendsText];

var rows = [];

for(var i in data.values)
{
    var row = []

    for(var j = 0; j != data.values[i].length; ++j)
    {
        row.push(data.values[i][j].present);
    }

    rows.push(row);
}

rows = legendsText.concat(rows.sort(function (a, b) {  }));
console.log(rows);
var chart = c3.generate({
bindto: '#chart',
data: {
rows: rows,
type: 'bar',
}
});

感谢任何帮助。

Answer 1

这是一个更新的 fiddle ，可将您的数据转换为结果:http://jsfiddle.net/Yq3DW/119/

关键方面:您的图例文本可以从您的测量数据中动态获取。 legendsText 的格式是“数组的数组”，因此这就是我在循环末尾将其包装在 [...] 中的原因。

var legendsText = [];
for(var i = 0; i != data.measures.length; ++i)
    legendsText.push(data.measures[i].name);

legendsText = [legendsText];

您的行可以从您的“值”数据中获取。但因为它不是一个数组，就像 measures 一样，您需要使用 foreach 循环而不是 for 循环:

var rows = [];

for(var i in data.values)
{
    var row = []

    for(var j = 0; j != data.values[i].length; ++j)
    {
        row.push(data.values[i][j].present);
    }

    rows.push(row);
}

编辑:更新了问题。仅显示一个标签的数据值(value)，但显示该数据的两个值，并提供漂亮的标签:http://jsfiddle.net/Yq3DW/130/

这里的关键:

1. 切换到列而不是行，允许一“行”数据代替标签索引器
2. 仅当值数据中的名称与您要搜索的名称匹配时才添加数据(必须更新数据 JSON 以使名称匹配)
3. 必须使用“tick”格式化程序将标签从 1-3 格式化为 jan、feb、mar。您可以通过使用大写/正确大小写转换来进一步自定义它。这超出了这个问题的范围，我不会将其包含在这里。如果您需要进一步格式化，请先搜索答案，如果找不到答案，请开始一个新的问题。
4. 显示一个动态链接列表，单击该列表即可调用 loadData 函数来更改图表中各个度量名称之间的数据

HTML:

<ul id="links"></ul>

<div id="chart"></div>

JS:

var $links = $('#links');
$links.html('');

for(var i = 0; i != data.measures.length; ++i)
{
    (function()
     {
        var name = data.measures[i].name;

        $('<li></li>')
            .text(data.measures[i].name)
            .click(function() { loadData(name); })
            .appendTo($links);
     })();

    // legendsText.push(data.measures[i].name);
}

function loadData(name)
{
    //var legendsText = [ ["present", "target"] ];
    var columns = [ ["labels"], [ "present" ], [ "target" ]];
    var labels = [];
    for(var i in data.values)
    {
        var row = []

        for(var j = 0; j != data.values[i].length; ++j)
        {
            if(data.values[i][j].name == name)
            {
                labels.push(i);
                columns[0].push(labels.length);


                columns[1].push(data.values[i][j].present);
                columns[2].push(data.values[i][j].target);
            }
        }

        //rows.push(row);
    }

    console.log(columns);

    //rows = legendsText.concat(rows.sort(function (a, b) {  }));
    var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'labels',
    columns: columns,
    type: 'bar',
    },
    axis: {
        x: {
            tick:  {
                format: function(index) { return labels[index-1]; }
            }
        }
    }
    });
}