Question

我们在C3中有以下混合折线图/条形图：

带有两组的条形图（浅色/深蓝色是一组，灰色是其他组）
另外两个数据集，表示为stroke-width = 0的行，表示group1和group2的限制。

如何将line1的圆形形状与group1的条形对齐，line2的圆形形状与group2的两条条形对齐？

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

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-chart-lines 容器内部并按订单找到所需的线路打火机：

GetById<T>

或按数据名称：

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

希望这有帮助。

将C3线条形状与条形图对齐

1 个答案: