Mise en forme de JSON pour C3.js

Je avoir une sortie JSON que j'ai besoin de convertir en x et l'axe y pour un C3.js ligne graphique, mais il ne semble pas aimer la façon dont il est actuellement mis en forme:

{
    "results": [
        {
            "param": "x",
            "val": [
                1,
                2,
                3,
                4
            ]
        },
        {
            "param": "y",
            "val": [
                2,
                3,
                5,
                6
            ]
        }
    ]
}

Quelle est la meilleure façon de transformer ce (à l'aide de JS), de sorte qu'il peut être lu par C3.

En fin de compte je vais télécharger plusieurs xy les graphiques en courbes, donc je suppose que ça va être quelque chose comme cet exemple de code, mais plutôt la tirant de json:

var chart = c3.generate({
    data: {
        url: '/sampleJSON',
        mimeType: 'json',
        xs: {
            'param-y': 'param-x',
            'data2': 'x2', //not sure how to name these ones differently on load, but this is a different issue
        },
        columns: [
            ['param-x', 1, 2, 3, 4],
            ['param-y', 2, 3, 5, 6],
            ['x2', 30, 50, 75, 100, 120], //again just placeholder to eventually have other data
            ['data2', 20, 180, 240, 100, 190] //again just placeholder to eventually have other data
        ]
    }
});

InformationsquelleAutor Mike | 2014-12-29

7

Au lieu d'utiliser c3 de faire le json demande, je venais de le manipuler en trois étapes.
1. Faire l'appel json.
2. Forcer les données à la structure c3 columns veut.
3. Créer le graphique.
```
d3.json("sample.json", function(data) {
  var modData = [];
  data.results.forEach(function(d, i) {
    var item = ["param-" + d.param];
    d.val.forEach(function(j) {
      item.push(j);
    });
    modData.push(item);
  });
  var chart = c3.generate({
    data: {
      columns: modData
    }
  });
});
```
Exemple ici.
- Merci pour ce - que c'était plus ou moins exactement ce que je cherchais. Le seul tweak est que j'ai besoin d'une seule série de x/y de coordonnées (plutôt que deux graphes) j'ai fait un petit tweak qui peut être trouvé ici
InformationsquelleAutor Mark

Donc la Marque de la réponse fait tout le travail dur, mais je pensais ajouter un peu tordu réponse (pour mettre en valeur mon commentaire à sa réponse), parce que les Marques de réponse utilise C3 à tracer les deux indépendants des graphiques, le tordu de code ci-dessous montre le tracé de la des objets dans le JSON que x/y cordintes:

d3.json("sample.json", function(data) {
  var modData = [];
  data.results.forEach(function(d, i) {
    var item = ["param-" + d.param];
    d.val.forEach(function(j) {
      item.push(j);
    });
    modData.push(item);
  });
  var chart = c3.generate({
    data: {
        xs: {
            'param-y':'param-x'
        },
        columns: modData
    }
  });
});

Vous pouvez voir mon légères modifications à son exemple ici

InformationsquelleAutor Mike

1

Je voudrais utiliser cette page comme référence: http://c3js.org/reference.html#data-keys

Vous pouvez voir comment il spécifie une zone séparée pour les touches spécifiques
```
keys: {
  //x: 'name', //it's possible to specify 'x' when category axis
  value: ['upload', 'download'],
}
```
InformationsquelleAutor Sam McGrail

Vous devez vous connecter pour publier un commentaire.