C3.js - 爲數據系列獨立顯示/隱藏點

我正在使用C3.js爲數據系列創建折線圖。C3.js - 爲數據系列獨立顯示/隱藏點

我很努力試圖只爲其中一個系列顯示「分數」。

基本上，首先我用一些參考數據創建一個多系列折線圖，然後加載（使用char.load）一個新的特定數據行，我想在其中顯示點，僅用於該特定行其他參考線保留隱藏點。

這可能通過C3.js？如果是這樣，你能指示我這麼做嗎，謝謝！此外，任何使用C3.js使用D3.js的方法都是受歡迎的。

這是所有點都隱藏了一個數據系列，僅供參考官方的例子： http://c3js.org/samples/point_show.html

2014-11-25 VicM

c3.js提供全面的類在其所有的元素屬性，這樣你就可以用CSS定製。例如隱藏在第二系列點添加這個CSS：

#chart .c3-circles-data2 { 
    display: none; 
}

例here。

來源

2014-11-25 01:19:16 Mark

下面是一個使用圖表對象的顯示和隱藏方法來選擇性地顯示行的一個示例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>show hide</title> 
    <meta charset="utf-8" /> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
</head> 
<body> 
    <div id="chart"></div> 
    <script> 
     var chart = c3.generate({ 
      bindto: '#chart', 
      data: { 
       x: 'x', 
       columns: [ 
        ['x',  1, 2, 3, 4, 5], 
        ['y1', 3, 5, 6, 4, 5], 
        ['y2', 2, 4, 7, 6, 5] 
       ] 
      } 
     }); 

     function cbclick(a){ 
      var lineData = "y" + a; 
      var cbID = "cb" + a 
      var cb = document.getElementById(cbID); 
      if (cb.checked) { 
       chart.show([lineData]); 
      } else { 
       chart.hide([lineData]); 
      } 
     } 
    </script> 

    <div align="center"> 
     <input type="checkbox" id="cb1" onclick="cbclick(1)" checked="true">y1</input> 
     <input type="checkbox" id="cb2" onclick="cbclick(2)" checked="true">y2</input> 
    </div> 
</body>

來源

2016-06-08 03:34:13 dreme

C3.js - 爲數據系列獨立顯示/隱藏點

回答

相關問題