High Chart - тип столбца в зависимости от месяца

0

Привет всем Я использую Highchart типа columnrange, я получил диаграмму из http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ и изменил его в соответствии с моей потребностью, теперь мне нужно имя месяца в полях оси x и y-оси. В настоящее время я не могу изменить число осей оси х до нескольких месяцев.

Мой сценарий выглядит так:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: 'Employee Bill Pending Detail'
        },

        subtitle: {
            text: 'Month Wise'
        },

        xAxis: {
            categories: ['Bank Bill Pending', 'Clam Pending']
        },

        yAxis: {
            title: {
                text: 'Session (2013-14)'
            }
        },

        tooltip: {
            valueSuffix: ''
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y ;
                    }
                }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Months',
            data: [
                [1, 4], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
                [2, 8]  // Here the [2,8] denotes months between 'Feb' & 'Aug'.         

            ]
        }]
    });
});

Любая помощь будет очень заметной.

Теги:
highcharts

1 ответ

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

Это действительно очень просто. Соответствующая документация API:

Вам нужно настроить данные таким образом (или использовать явную метку js):

series: [{
    name: 'Months',
    data: [
        [Date.UTC(2013, 0, 1), Date.UTC(2013, 3, 1)], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
        [Date.UTC(2013, 2, 1), Date.UTC(2013, 7, 1)] // Here the [2,8] denotes months between 'Feb' & 'Aug'.         
        ]
}]

Обратите внимание, что Data.UTC() равен нулю, так что январь равен "0". Последний элемент в этом списке - это дата. Поскольку ваши данные всего за месяц, я сделал это "1". Вы можете иметь все, что хотите здесь, как отображение на dataLabel а tooltip обрабатывается с помощью dateFormat.

Пример jsFiddle.

Поделиться
  • 0
    Большое вам спасибо @wergeld, сэр. :)
  • 0
    Уважаемый господин; Работает, но диапазон дат на оси х выходит за пределы выбранных месяцев сеанса, т. Е. (2013-14). Мне нужно исправить метку оси X на 12 месяцев (с апреля 13 по 14 марта). Означает, что мои узлы оси X зафиксированы как 12 месяцев сеанса.
Показать ещё 3 комментария

Ещё вопросы

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