Блог

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

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

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

Я бы посоветовал взглянуть на свойство «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 и низкое значение, но это кажется выполнимым?

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

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

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