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

Question

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

我想要做什么:动态构建柱形图。例如，多年级学生的成绩将被校准为(第一年:50)，(第二年:100)等，其中第一部分(类别:年份)在X轴上，数字部分在X轴上(标记)转到 Y 轴。此类组合的数量是动态的，具体取决于用户的要求(从数据库中以两列、多行的形式获取)。

我遇到的问题:

1. 在键中指定两种不同的数据类型会将非数字部分(类别)完全呈现为一个单独的系列，这是我不想要的，而且甚至不起作用。

   <

2. 无论我做什么，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