C3.js 시계열 조합 차트 - 툴팁이 작동하지 않습니다.

Question

나는이 차트에 내가 원하는 방식으로 표시되도록 3 일 동안 노력했습니다. 그룹화 된 막 대형 차트 번호가 꺼질 때까지 모든 것이 100 % 작동했습니다.

예 : 하단 막대 값이 10이고 상단 막대 값이 20 인 경우 그룹화 된 막대 상단이 30을 읽습니다. 이것은 기본 동작이지만 내 데이터를 어떻게 나타내려고하지는 않습니다. 그룹화 된 막대의 상단에 가장 높은 숫자가 무엇이든간에 읽으려는 경우, 정확히 내가 원하는 방식으로 데이터를 나타내는 this fiddle으로 연결됩니다.

내 논리를 리팩터링 한 후 this이 내가 지금까지 가지고있는 것입니다. 보시다시피 timeseries 행이 분리되어 툴팁이 데이터 그룹을 렌더링하지 않습니다.

내 질문 : 세 개의 데이터 포인트 (렌더링하는 툴팁을 얻을 수있는 방법

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 인 경우에도 모든 값이 표시되기를 원합니다. 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 
} 

---

을

또한, 그룹화 값을 얻을 수있는 짧은 방법이 나에게 보인다 업데이트
중복 키가있는 것 같습니다. 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를 참조하십시오.