Как переместить ряды строк в Highchart?

Question

У меня есть этот расширенный формат:

    series:[{
        name: 'X',
        type: 'column',
        color: '#F4811F'
    },{
        name: 'Y',
        type: 'column',
        color: '#8EB950'
    },{
        name: 'Z',
        type: 'column',
        color: '#5C97D3'
    }, {
        name: 'AvgX',
        type: 'line',
        lineWidth: 4,
        color: '#F4811F'
    }, {
        name: 'AvgY',
        type: 'line',
        lineWidth: 4,
        color: '#8EB950'
    }, {
        name: 'AvgZ',
        type: 'line',
        lineWidth: 4,
        color: '#5C97D3'
    }]

Отображаемый график выглядит следующим образом

Как я могу переместить AvgXбыть на X и AvgZ быть на Z?Есть ли возможность в Highchart сделать это?

Answer 1

Вы можете установить pointPlacement свойство для line серии:

series: [{
    name: 'X',
    type: 'column',
    color: '#F4811F',
    data: [1, 1, 1]
}, {
    name: 'Y',
    type: 'column',
    color: '#8EB950',
    data: [1, 1, 1]
}, {
    name: 'Z',
    type: 'column',
    color: '#5C97D3',
    data: [1, 1, 1]
}, {
    name: 'AvgX',
    type: 'line',
    lineWidth: 4,
    pointPlacement: -0.2,
    color: '#F4811F',
    data: [2, 2, 2]
}, {
    name: 'AvgY',
    type: 'line',
    lineWidth: 4,
    color: '#8EB950',
    data: [3, 3, 3]
}, {
    name: 'AvgZ',
    type: 'line',
    lineWidth: 4,
    pointPlacement: 0.2,
    color: '#5C97D3',
    data: [4, 4, 4]
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/m4y0xepo/

API: https://api.highcharts.com/highcharts/series.line.pointPlacement