对齐C3符合条形图形状

Question

我们已经在C3以下混合线路图/条形图：

• 两组（光/暗蓝色是一组条形图，灰色是其他的 组）

• 两个其他数据集表示为stroke-width = 0的行，表示group1和group2的限制。

我们如何将line1的圆形与group1的bar对齐，line2的circle形状与group2的两个bar对齐？

在下面的例子中，我们基本上希望将两个圆中的一个稍微向右移动，以便与一个组的中心对齐，而另一个稍向左。

var chartSettings = { 
 
     padding: { 
 
      left: 120, 
 
      right: 120 
 
     }, 
 
     bindto: '#chart', 
 
     data: { 
 
      x: 'Dates', 
 
      type: 'bar', 
 
      types: { 
 
       line1: 'line', 
 
       line2: 'line' 
 
      }, 
 
      groups: [ 
 
       ['data2', 'data3'], 
 
      ], 
 
      colors: { 
 
       data1: '#f3e274', 
 
       data2: '#85bdde', 
 
       data3: '#ccebfb' 
 
      }, 
 
     }, 
 
     bar: { 
 
      width: { 
 
       ratio: 0.50 
 
      } 
 
     }, 
 
     point: { 
 
      r: 8 
 
     }, 
 

 
     axis: { 
 
      x: { 
 
       type: 'timeseries', 
 
       tick: { 
 
        format: '%d-%m-%Y' 
 
       } 
 
      }, 
 
      y: { 
 
       label: { // ADD 
 
        text: '', 
 
        position: 'outer-middle' 
 
       }, 
 
     
 
      }, 
 
     } 
 
    }; 
 
    
 
    var date1 = new Date(2015, 1, 1, 0,0, 0,0); 
 
    var date2 = new Date(2015, 3, 1, 0,0, 0,0); 
 
    var date3 = new Date(2015, 6, 1, 0,0, 0,0); 
 
    var xAxis = ['Dates', date1, date2,date3]; 
 
    var line1 = ['line1', 50, 60,55]; 
 
    var line2 = ['line2', 70, 75,60]; 
 
    var data1 = ['data1', 40, 35,30]; 
 
    var data2 = ['data2', 5, 10,10]; 
 
    var data3 = ['data3', 20, 15,30]; 
 
    chartSettings.data.columns = [xAxis, 
 
      line1, 
 
      line2, 
 
      data1, 
 
      data2, 
 
      data3]; 
 
c3.generate(chartSettings);

#cr-chart .c3-line-accordatoTotale { 
 
    stroke-width: 0px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<div id="chart"/>

var chartSettings = { 
 
     bindto: '#chart', 
 
     data: { 
 
      x: 'Dates', 
 
      type: 'bar', 
 
      types: { 
 
       line1: 'line', 
 
       line2: 'line' 
 
      }, 
 
      groups: [ 
 
       ['data2', 'data3'], 
 
      ], 
 
      names: { 
 
       line1: 'Limit for data1', 
 
       line2: 'Limit for data2 + data3', 
 
       data1: 'Data1', 
 
       data2: 'Data2', 
 
       data3: 'Data3' 
 
      }, 
 

 
     }, 
 
     bar: { 
 
      width: { 
 
       ratio: 0.50 // this makes bar width 50% of length between ticks 
 
      } 
 
     }, 
 
     point: { 
 
      r: 8 
 
     }, 
 

 
     axis: { 
 
      x: { 
 
       type: 'timeseries', 
 
       tick: { 
 
        format: '%d-%m-%Y' 
 
       } 
 
      }, 
 
      y: { 
 
       label: { // ADD 
 
        text: '', 
 
        position: 'outer-middle' 
 
       } 
 
      }, 
 
     } 
 
    }; 
 

 
var date1 = new Date(2016, 1, 1, 0, 0, 0, 0); 
 
var date2 = new Date(2016, 3, 1, 0, 0, 0, 0); 
 
var date3 = new Date(2016, 6, 1, 0, 0, 0, 0); 
 
var xAxis = ['Dates',date1,date2,date3]; 
 
var line1 = ['line1', 50, 70,80]; 
 
var data1 = ['data1', 30, 40, 60]; 
 
var line2 = ['line2', 70, 60,40]; 
 
var data2 = ['data2',10,15,20]; 
 
var data3 = ['data3',15,30,5]; 
 
chartSettings.data.columns = [xAxis, 
 
      line1, 
 
      line2, 
 
      data1, 
 
      data2, 
 
      data3]; 
 
c3.generate(chartSettings);

 
#chart .c3-line-line1 { 
 
    stroke-width: 0px; 
 
} 
 

 
#chart .c3-line-line2 { 
 
    stroke-width: 0px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<div id="chart"/>

Answer 1

如果附加了一些的jsfiddle这将是很好。
但在这一点上，我可以说，你可能需要看看里面≥C3，图线容器和秩序找到所需的行eighter ：

.c3-chart-line:first-child // or last-child? 

或通过数据名称：

.c3-chart-line.c3-target-YOUR-ORANGE-DATA-NAME 

希望这会有所帮助。