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

【问题标题】：Importing Categorical data from SQL, to C3.js, using JSON使用 JSON 将分类数据从 SQL 导入 C3.js
【发布时间】：2016-06-28 18:49:51
【问题描述】：

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

我想做的事：动态构建柱形图。例如，多年学生的分数将被校准为（Year 1：50），（Year 2：100）等，其中第一部分（类别：Year）在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

【问题讨论】：

标签： javascript asp.net json asp.net-mvc c3.js

【解决方案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

【讨论】：