C3.js组合图表与时间序列 - 工具提示不起作用

Question

我一直在尝试3天得到这张图表来显示我想要的方式。直到我意识到分组条形图号码关闭之前，所有事情都一直在运作。

示例：当底栏值等于10且顶栏值等于20时，分组栏的顶部显示为30.这是默认行为，但不是我想如何表示我的数据。我希望分组栏的顶部能够读取最高的数字，这导致我以我想要的方式代表数据。

重构我的逻辑后，this是我迄今为止。正如你所看到的，时间序列行被分解了，工具提示并没有渲染被悬停的数据组。

我的问题：

1）如何获得工具提示呈现所有三个数据点（数量，价格，搜索）

2）如何巩固时间序列行，以便它不会断开

任何帮助将不胜感激，所以我可以从这3天头痛！

以下是我的大部分代码 - 为简洁起见，不包括JSON数组，这可在我上面的jsfiddle链接中获得。预先感谢您的时间。

var chart = c3.generate({ 
     bindto: '#chart', 
     data: { 
      x: 'x-axis', 
      type: 'bar', 
      json: json, 
      xFormat: '%Y-%m-%d', 
      keys: { 
       x: 'x-axis', 
       y: 'searches', 
       value: ['qty', 'searches', 'price'] 
      }, 
      types: { 
       searches: 'line' 
      }, 
      groups: [ 
       ['qty', 'price'] 
      ], 
      axes: { 
       qty: 'y', 
       searches: 'y2' 
      }, 
      names: { 
       qty: 'Quantity', 
       searches: 'Searches', 
       price: 'Price ($)' 
      }, 
      colors: { 
       price: 'rgb(153, 153, 153)', 
       qty: 'rgb(217, 217, 217)', 
       searches: 'rgb(255, 127, 14)' 
      } 
     }, 
     bar: { 
      width: { 
       ratio: 0.60 
      } 
     }, 
     axis: { 
      x: { 
       type: 'timeseries', 
       label: { text: 'Timeline', position: 'outer-right' }, 
       tick: { 
        format: '%Y-%m-%d' 
       } 
      }, 
      y: { 
       type: 'bar', 
       label: { 
        text: 'Quantity/Price', 
        position: 'outer-middle' 
       } 
      }, 
      y2: { 
       show: true, 
       label: { 
        text: 'Searches', 
        position: 'outer-middle' 
       } 
      } 
     }, 
     tooltip: { 
      grouped: true, 
      contents: function(d, defaultTitleFormat, defaultValueFormat, color) { 
       var data = this.api.data.shown().map(function(series) { 
        var matchArr = series.values.filter(function(datum) { 
         return datum.value != undefined && datum.x === d[0].x; 
        }); 
        if (matchArr.length > 0) { 
         matchArr[0].name = series.id; 
         return matchArr[0]; 
        } 
       }); 
       return this.getTooltipContent(data, defaultTitleFormat, defaultValueFormat, color); 
      } 
     } 
    }); 

Answer 1

1）如果我说得对，您希望工具提示显示所有值，即使其中一些值为空。 默认值为空值。您可以将它们替换为零（如果它适合您的任务），并使其可见。

而且，在我看来，有一个较短的方式来获得分组值：

var data = chart.internal.api.data().map(function(item) { 
    var row = item.values[d[0].index];  // get data for selected index 
    if (row.value === null) row.value = 0; // make null visible 
    return row; 
}); 

2）我认为你是在谈论line.connectNull选项：

line: { 
    connectNull: true 
} 

---

更新
看起来像有重复的键休息工作api.data（）方法。
您需要更改JSON结构，使键独特：

前：

var json = [ 
    {"x-axis":"2017-07-17","qty":100}, 
    {"x-axis":"2017-07-17","price":111}, 
    {"x-axis":"2017-07-17","searches":1}, 
    {"x-axis":"2017-07-18","qty":200}, 
    {"x-axis":"2017-07-18","price":222}, 
    {"x-axis":"2017-07-18","searches":2} 
]; 

后：

var json = [ 
    {"x-axis":"2017-07-17","qty":100,"price":111,"searches":1}, 
    {"x-axis":"2017-07-18","qty":200,"price":222,"searches":2} 
]; 

见fiddle。