Question

我有一个特定的JSON输出，我需要转换为一个C3.js线图的x和y轴，但它似乎不喜欢它当前格式化的方式：

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

转换它的最佳方法是什么（使用JS），以便C3可以读取它。

最终我要上传多个xy折线图，所以我猜它必须像this sample code那样，而是从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
        ]
    }
});

Answer 1

我没有使用c3来发出json请求，而只是分三步处理它。

拨打json电话。
将数据强制转换为c3 columns想要的结构。
创建图表。

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
    }
  });
});

示例here。

Answer 2

所以Mark的答案完成了所有艰苦的工作，但我想我会添加一个稍微调整过的答案（以突出我对他的答案的评论），因为Marks的答案使用C3绘制两个独立的图表，下面的调整代码显示了它将JSON中的对象绘制为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
    }
  });
});

您可以看到我对其示例here

的轻微修改

Answer 3

我会将此页面用作参考：http://c3js.org/reference.html#data-keys

您可以看到他如何为特定键指定单独的区域

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">x</button>
  <button type="button" class="btn btn-default">x</button>
  <button type="button" class="btn btn-default">x</button>
</div>

格式化C3.js的JSON

3 个答案: