使用 JSON 将分类数据从 SQL 导入到 C3.js

Question

我目前正在使用 C3 Charts 在 MVC 中动态构建柱形图。虽然我可以使用 AJAX/JSON 从数据库中获取数据，但我只能使用 C3 的 JSON 属性绑定 Y 轴坐标，而不能绑定 X 轴类别。

我想做的事：动态构建柱形图。例如，多年生的分数将被校准为（第一年：50），（第二年：100）等，第一部分（类别：年）在X轴上，数字部分（标记）转到 Y 轴。此类组合的数量是动态的，具体取决于用户的要求（从数据库中提取为两列，多行）。

我运行遇到的问题：

在键中指定两种不同的数据类型会使非数字部分（类别）完全作为一个单独的系列呈现，这是我不想要的，甚至不起作用。
无论我做什么，X 轴都带有整数，具体取决于可见列的数量。我想将其更改为实际的类别名称。

这就是我正在做的。我从这里的 Daniel 的方法中得到灵感 (https://groups.google.com/d/msg/c3js/RV1X18GZoGY/-p39m9Ngt-gJ)

    $.ajax({
    url: <Method in Controller here>,
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(parameters),
    success: function (data) {
            var myData = jQuery.parseJSON(data);
            var testJson = $.map(myData, function (item) {
                return {
                    Year: item.Year,
                    Marks: item.Marks

                }
            });

            var chart = c3.generate({
                bindto: '#chart',
                size: {
                    width: 800
                },
                data: {
                    json: testJson,

                    mimeType: 'json',
                    keys: {
                        value: ['Marks']
                    },

                }
            });
    }
});

期待一些帮助。提前致谢！

编辑：我希望数据最后看起来像这样： Sample Chart

Answer 1

您可以试试下面的代码：

var jsonTest =  [
                   { year: 1, marks: 50 },
                   { year: 2, marks: 70 },
                   { year: 3, marks: 75 },
                   { year: 4, marks: 45 },
                ];

// The variable name chart will automatically bind itself to an id = chart 
var chart = c3.generate({
    data: {                
        type : 'bar',
        json: jsonTest,
        keys: {
            x: 'year',
            value: ['marks']
        }
    },
    size: {
        width: 400,
    },
    axis: {
        x: {
            type: 'category'
        }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});

我得到以下输出：

这是 JSBin 示例：Bar Chart Example

使用 JSON 将分类数据从 SQL 导入到 C3.js

Importing Categorical data from SQL, to C3.js, using JSON

javascript

asp.net

asp.net-mvc

json

c3.js