c3.js：基於gap/null值隱藏系列中的點

我試圖從使用其API的特定服務中複製圖表，我遇到了顯示間隙的問題。因此，現在和接下來的流都不會提供某些源的信息，而我通過在列中添加空值並處理connectNull：false來處理該信息。c3.js：基於gap/null值隱藏系列中的點

但有其中的值由努列斯

[null, 66, null]

所以沒有什麼happes因爲點被隱藏隔離的情況，但我想說明這個值。我正在考慮使用CSS強制opacitiy：1在某些點上，但我無法檢測到它們。有什麼建議？

self.chart = c3.generate({ 
    bindto: d3.select('#' + self.chartDivId), 
    data: { 
     x: 'x', 
     xFormat: self.options.xAxisTimeFormat, 
     columns: self.chartDataSet, 
    }, 
    line: { 
     connectNull: ??? 
    }, 
    point: { 
     show: ??? 
    }, 
    tooltip: { 
     show: true, 
     grouped: true 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       fit: false, 
       format: self.options.xAxisTimeFormat, 
       localtime: false 
      } 
     }, 
     y: { 
      min: 0, 
      tick: { 
       fit: false, 
       format: function(d) { 
        return self.yFormatter(d); 
       }, 
      } 
     } 
    } 
});

來源

2017-05-29 CountGradsky

而不是空只是給0和嘗試。 –

它會連接到0值，我需要知道源更新 – CountGradsky

添加此放置例程到圖表聲明。它查找所有c3圓類（每個數據系列的點），然後測試與它們相關的數據以獲得隔離的數據點。然後這些用於在相關的各個圓圈（點）上設置不透明度。

onrendered: function() { 
    var circles = d3.select("#chart").selectAll(".c3-circles"); 
    circles.each (function (d) { 
     var isolates = d.values.filter (function(obj, i) { 
      var precedeNull = (i === 0 || d.values[i-1].value === null); 
      var followingNull = (i === d.values.length-1 || d.values[i+1].value === null); 
      return precedeNull && followingNull; 
     }); 
     var indexSet = d3.set (isolates.map (function (iso) { return iso.index; })); 
     d3.select(this).selectAll("circle.c3-circle").style("opacity", function (d,i) { 
      return indexSet.has(i) ? 1 : 0;  
     }); 
    }) 
}

http://jsfiddle.net/ht2nrmg7/ - 全小提琴

來源

2017-05-31 10:09:07 mgraham

這個作品就像一個魅力的差距，感謝麻煩的人！ – CountGradsky

c3.js：基於gap/null值隱藏系列中的點

回答

相關問題