Столбчатая диаграмма Highcharts

Question

Я пытаюсь использовать Highcharts для создания графика, похожего на то, что показано ниже. Как видно, 1-й столбец (100%) является суммой всех остальных. Подход, о котором я думал, заключался в том, чтобы иметь невидимые ряды под каждой из отдельных категорий, чтобы придать им повышенный вид. Единственное, что меня сдерживает, - это мысль о ситуации, когда мне, возможно, придется иметь дело с, скажем, более 30 категориями (возможно, в нашем приложении). Есть ли более простой способ добиться того же результата?

Я не могу опубликовать изображение напрямую, так как я новый пользователь. К сожалению.

http://i.stack.imgur.com/RBWIf.png

Answer 1

Я бы посоветовал взглянуть на свойство "low", которое показано здесь:

http://fiddle.jshell.net/8JP8T/

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'column'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    series: [{
        data: [{
            low: 1,
            y: 2
        }, {
            low: 2,
            y: 4  
        }, {
            low: 0,
            y: 4  
        }, {
            low: 4,
            y: 5  
        }]
    }]

});

Вам все равно придется предварительно обработать данные, чтобы получитьправильное значение y и низкое значение, но это кажется выполнимым?

Answer 2

Для столбчатой ​​диаграммы для каждой точки можно указать значение y и соответствующее значение low для создания плавающего столбца .

series: [{
    data: [
               {y: 29.9, low: 20}, 
               {y: 50, low: 20}, 
               {y: 100, low: 50}
    ]
}]

См. Этопример на jsfiddle .