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。