我目前正在使用 C3 图表在 MVC 中动态构建柱形图。虽然我可以使用 AJAX/JSON 从数据库中获取数据,但我只能使用 C3 的 JSON 属性绑定(bind) Y 轴坐标,而不是 X 轴类别。
我想要做什么:动态构建柱形图。例如,多年级学生的成绩将被校准为(第一年:50),(第二年:100)等,其中第一部分(类别:年份)在X轴上,数字部分在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
最佳答案
您可以尝试以下代码:
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
关于javascript - 使用 JSON 将分类数据从 SQL 导入到 C3.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38084063/