C3.js時系列のコンビネーションチャート - ツールチップが機能しない

Question

私はこのチャートに私が望む方法を表示させるために3日間努力してきました。グループ化された棒グラフの数値がオフになっていることがわかるまで、すべてが100％働いていました。

例：ボトムバーの値が10で、トップバーの値が20の場合、グループ化されたバーの上部が30です。これはデフォルトの動作ですが、データをどのように表現したいのですか。私は、グループ化されたバーの上端が最高の数字であれば何でも読んでほしいと思っています。ちょうど私が欲しかったデータを表すthis fiddleにつながります。

私のロジックをリファクタリングした後、thisは私がこれまで持っていたものです。あなたが見ることができるように、timeseries行は分割され、ツールチップはデータのグループを上に乗せてレンダリングしていません。

私の質問：すべての3つのデータポイントを（レンダリングするためにツールチップを取得する方法

1）数量、価格、検索）それは

を切断していないので、時系列ラインを固める方法

2）

私はこの3日間の頭痛から移動することができますので、どんな助力も大変ありがとうございます！

以下は私のコードの大部分です。上記のjsfiddleリンクで入手できる簡潔さのためにJSON配列を除いています。あなたの時間のために事前にありがとうございます。

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）私が正しく理解していれば、それらのうちのいくつかがヌルであっても、ツールチップにすべての値を表示させたい。 null値はデフォルトで非表示になっています。それらをゼロに置き換えることができます（タスクに適している場合）ので、それらを表示することができます。

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 
} 

---

を

また、グループ化された値を取得するための短い方法があるように私には思えますUPDATE
重複したキーを持つように見えます。api.data（）メソッド。後

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} 
]; 

：：前

：
あなたがキーユニークを作るために、JSONの構造を変更する必要が

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を参照してください。