Question

我正在尝试组合两种不同数据来源的图表（'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挣扎了很多。）< / p>

非常感谢提前！

Answer 1

我认为不可能将jsondata与列直接混合。

但你可以将你的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]
    ],

是否可以组合来自JSON对象和列的数据？ [C3JS]

1 个答案: