Высокие диаграммы: метки оси X внутри столбцов

0

Я хотел бы разместить метки X-оси внутри моих столбцов и повернуться в вертикальное положение. Я искал в Интернете бесконечно, но на данный момент ничего не работает, поэтому я постараюсь написать свою конкретную проблему.

Здесь скрипка: http://jsfiddle.net/D43q9/1/

$(document).ready(function() {
function chart() { 
    var change = {
        0: '',
        25: '',
        50: '',
        75: '',
        100: ''
    };
    $('#chart').highcharts({
        legend: {
          enabled: false  
        },
        tooltip: {
            enabled: false
        },
        chart: {
            type: 'column',
            marginTop: 0,
            backgroundColor: 'transparent',
            spacingTop: 0,
            spacingRight: 20,
            spacingBottom: 20,
            spacingLeft: 20
        },
        plotOptions: {
                column: {
                    pointPadding: 0,
                    borderWidth: 0,
                    groupPadding: 0.025
                }
            },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
            labels: {
                style: {
                    color: '#000',
                    font: '14px Nunito',
                    top: '100px'
                },
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0
        },
        yAxis: {
            max: 101,
            labels: {
                formatter: function() {
                    var value = change[this.value];
                    return value !== 'undefined' ? value : this.value;
                },
                style: {
                    color: '#fff',
                    font: '12px Nunito'
                }
            },
            title: {
                text: null
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: '#444',
            gridLineColor: '#444'
        },
        credits: {
          enabled: false  
        },
        series: [{
            name: '',
            data: [95,70,80,60,100,75],
            color: '#ffd800',
            borderColor: 'transparent'
        }]
    });
};
chart();
});
Теги:
highcharts

1 ответ

1
Лучший ответ

Установите значения вращения и y для меток: http://jsfiddle.net/D43q9/2/

        xAxis: {
            categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
            labels: {
                rotation: -90,
                y: -20,
                style: {
                    color: '#000',
                    font: '14px Nunito',
                    top: '100px'
                },
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0
        }
  • 0
    Это работает. Огромное спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню