是否可以合并来自 JSON 对象和列的数据? [C3JS]
Is it possible to combine data from JSON object AND from columns? [C3JS]
我正在尝试合并两种具有不同数据来源的图表('scatter' 和 'line')。
我能够单独成功显示它们中的每一个(因此出现以下屏幕截图),但不能同时显示它们。
我的猜测是 data.keys 的使用覆盖了来自我的列的数据的显示,但我还没有发现与此问题相关的任何内容。
var jsondata = [{
"intentId": "QP3035",
"intentName": "lapin",
"confidence": 90,
"occurences": 150
}, {
"intentId": "QP4019",
"intentName": "ours",
"confidence": 80,
"occurences": 140
}, {
"intentId": "QP4022",
"intentName": "chouette",
"confidence": 60,
"occurences": 60
}, {
"intentId": "QP3032 ",
"intentName": "cheval",
"confidence": 21,
"occurences": 120
}, {
"intentId": "QP4029",
"intentName": "poule",
"confidence": 18,
"occurences": 17
}];
jsondata = jsonfile.sort(function(a, b) {
return a.confidence - b.confidence;
});
var test = c3.generate({
bindto: '#intentsConfidenceChart',
data: {
json: jsondata,
keys: {
x: 'confidence',
value: ['confidence', 'occurences']
},
xs: {
graphTop: 'x1',
graphBot: 'x2'
},
columns: [
['x1',20,100],
['x2', 20,20,90,100,100],
['graphTop',160,160],
['graphBot',160,140,40,40,160]
],
types:{
occurences: 'scatter',
graphTop:'line',
graphBot:'line'
}
},
axis: {
x: {
min: 0,
max: 100,
label: 'Confidence Level',
tick: {
fit: false
}
},
y: {
label: 'Occurences'
}
},
legend: {
show: false
},
tooltip: {
contents: function(d) {
return jsonfile[d[0].index].intentId + ' : ' + jsonfile[d[0].index].intentName;
}
}
});
(顺便说一句,我画这些图的原因是我希望有一个响应区域来区分我的图的某个区域。在开始设想这个小技巧之前,我在 svg 上挣扎了很多。 )
非常感谢!
我认为不可能将json数据与列直接混合。
但您可以将您的 json 转换为数组 并将其与其他数组一起使用:
data: {
//json: jsondata,
// keys: {
// x: 'confidence',
// value: ['confidence', 'occurences']
// },
xs: {
graphTop: 'x1',
graphBot: 'x2',
confidence: 'occurences'
},
columns: [
['x1',20,100],
['x2', 20,20,90,100,100],
['graphTop',160,160],
['graphBot',160,140,40,40,160],
["confidence", 90, 80, 60, 21, 18],
["occurences", 150, 140 , 60, 120, 17]
],
我正在尝试合并两种具有不同数据来源的图表('scatter' 和 'line')。
我能够单独成功显示它们中的每一个(因此出现以下屏幕截图),但不能同时显示它们。
我的猜测是 data.keys 的使用覆盖了来自我的列的数据的显示,但我还没有发现与此问题相关的任何内容。
var jsondata = [{
"intentId": "QP3035",
"intentName": "lapin",
"confidence": 90,
"occurences": 150
}, {
"intentId": "QP4019",
"intentName": "ours",
"confidence": 80,
"occurences": 140
}, {
"intentId": "QP4022",
"intentName": "chouette",
"confidence": 60,
"occurences": 60
}, {
"intentId": "QP3032 ",
"intentName": "cheval",
"confidence": 21,
"occurences": 120
}, {
"intentId": "QP4029",
"intentName": "poule",
"confidence": 18,
"occurences": 17
}];
jsondata = jsonfile.sort(function(a, b) {
return a.confidence - b.confidence;
});
var test = c3.generate({
bindto: '#intentsConfidenceChart',
data: {
json: jsondata,
keys: {
x: 'confidence',
value: ['confidence', 'occurences']
},
xs: {
graphTop: 'x1',
graphBot: 'x2'
},
columns: [
['x1',20,100],
['x2', 20,20,90,100,100],
['graphTop',160,160],
['graphBot',160,140,40,40,160]
],
types:{
occurences: 'scatter',
graphTop:'line',
graphBot:'line'
}
},
axis: {
x: {
min: 0,
max: 100,
label: 'Confidence Level',
tick: {
fit: false
}
},
y: {
label: 'Occurences'
}
},
legend: {
show: false
},
tooltip: {
contents: function(d) {
return jsonfile[d[0].index].intentId + ' : ' + jsonfile[d[0].index].intentName;
}
}
});
(顺便说一句,我画这些图的原因是我希望有一个响应区域来区分我的图的某个区域。在开始设想这个小技巧之前,我在 svg 上挣扎了很多。 )
非常感谢!
我认为不可能将json数据与列直接混合。
但您可以将您的 json 转换为数组 并将其与其他数组一起使用:
data: {
//json: jsondata,
// keys: {
// x: 'confidence',
// value: ['confidence', 'occurences']
// },
xs: {
graphTop: 'x1',
graphBot: 'x2',
confidence: 'occurences'
},
columns: [
['x1',20,100],
['x2', 20,20,90,100,100],
['graphTop',160,160],
['graphBot',160,140,40,40,160],
["confidence", 90, 80, 60, 21, 18],
["occurences", 150, 140 , 60, 120, 17]
],