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值隐藏系列中的点

回答

相关问题