HighCharts - show xaxis title

Question

Я работаю с основными картами, но сначала позвольте мне объяснить. График нужны эти элементы/параметры - каждый штрих должен иметь свою собственную ширину (сделано)
- каждый штрих должен иметь свой собственный цвет (сделано)
- линия с уровнем насчитайте (сделано)

Однако есть одна вещь, с которой я не могу работать: На xaxis нужны имена баров (например, здесь: http://www.highcharts.com/demo/column-rotated-labels).

Я пробовал разные методы, и если я использую метод 1, я не могу установить настраиваемые ширины штрихов, если я использую метод 2, я не могу установить заголовки по оси x. У кого-нибудь есть идея?

Мой код до сих пор:

$(function() { 
// Create the chart 
$('#container').highcharts({ 
    chart: { 
     type: 'column', 
    }, 
    credits: { 
     enabled: false, 
    }, 
    title: { 
     text: '' 
    }, 
    xAxis: { 
     type: 'category', 
     title: { 
      text: 'Kerntaken', 
     }, 
     labels: { 
      enabled: true, 
     }, 
     categories: ['Apples', 'Bananas', 'Oranges'] 
    }, 
    yAxis: [{ 
     title: { 
      text: 'Gemiddeld niveau', 
     }, 
     allowDecimals: false, 
     plotLines: [{ 
      color: 'black', 
      value: '2', // Insert your average here 
      width: '1', 
      zIndex: 5, // To not get stuck below the regular plot lines 
      label: { 
       text: 'gemiddeld niveau', 
       align: 'right', 
       y: 12, 
       x: 0 
      } 
     }], 
    },{ 
     title: { 
      text: '' 
     }, 
     allowDecimals: false, 
    },{ 
     title: { 
      text: '' 
     }, 
     allowDecimals: false, 
    },{ 
     title: { 
      text: '', 
     }, 
     opposite: true, 
    }], 
    legend: { 
     enabled: false 
    }, 

    tooltip: { 
     pointFormat: '<b>{point.y:.2f}</b><br/>', 
    }, 

    series: [{ 
     name: "Kerntaken", 
     colorByPoint: true, 
     colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
     pointWidth: 20, 
     data: [{ 
      name: "Adviseren", 
      y: 3.2, 
      drilldown: "Adviseren", 
     }], 
    }, { 
     name: "Kerntaken", 
     colorByPoint: true, 
     colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
     pointWidth: 50, 
     data: [{ 
      name: "Analyseren", 
      y: 1.5, 
      drilldown: "Analyseren", 
     }] 
    }, { 
     name: "Kerntaken", 
     colorByPoint: true, 
     colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
     pointWidth: 30, 
     data: [{ 
      name: "Organiseren", 
      y: 3.9, 
      drilldown: "Organiseren", 
     }] 
    }, { 
     name: 'CP niveau', 
     type: 'spline', 
     data: [2], 
     tooltip: { 
      headerFormat: 'gemiddeld niveau<br>', 
     }, 
    }], 
}); 

Моя скрипка с моим кодом до сих пор: https://jsfiddle.net/Mik3yZ/L181kpqt/2/

Answer 1

Вам не нужно заполнять данные нулями, но не нулями, но вы можете просто указать x индекс в точке. Я не уверен, если это действительно подходит для использования в корпусе с разверткой (и категоризированной осью), но может быть достаточно:

Примера данных:

series: [{ 
    name: "Kerntaken", 
    colorByPoint: true, 
    colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 20, 
    data: [{ 
     x: 0, // added x-position 
     name: "Adviseren", 
     y: 3.2, 
     drilldown: "Adviseren", 
    }], 
}, { 
    name: "Kerntaken", 
    colorByPoint: true, 
    colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 50, 
    data: [{ 
     x: 1, // added x-position 
     name: "Analyseren", 
     y: 1.5, 
     drilldown: "Analyseren", 
    }] 
}, { 
    name: "Kerntaken", 
    colorByPoint: true, 
    colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 30, 
    data: [{ 
     x: 2, // added x-position 
     name: "Organiseren", 
     y: 3.9, 
     drilldown: "Organiseren", 
    }] 
}, { 
    name: 'CP niveau', 
    type: 'spline', 
    data: [2], 
    tooltip: { 
     headerFormat: 'gemiddeld niveau<br>', 
    }, 
}], 

Теперь, как я уже говорил, отключить группировку из столбцов:

plotOptions: { 
    column: { 
    grouping: false 
    } 
} 

И работает демо: http://jsfiddle.net/xkjqtcq3/3/

Дополнительное примечание:

У вас есть много дополнительных запятых в вашем коде, просто имейте в виду, что это вызовет ошибки в IE < 9.

Answer 2

Вы должны изменить формат данных серии, как это. Поскольку вы используете несколько рядов, вы должны иметь значения категории отображения (здесь null) для каждой серии, чтобы отображать коррекционные метки оси x.

series: [{ 
     name: "Kerntaken", 
     pointWidth: 20, 
     data: [3.2,null,null] 
    }, { 
     name: "Kerntaken", 
     pointWidth: 50, 
     data: [null,1.5,null] 
    }, { 
     name: "Kerntaken", 
     pointWidth: 30, 
     data: [null,null,3.9] 
    }] 

Вот обновленный Fiddle, что это помогает.

Answer 3

Привет, вы можете проверить, хотите ли вы этого?

Я изменил ваши данные серии это:

{ 
    name: "Apples", 
    colorByPoint: true, 
    colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 20, 
    data: [3.2, 0, 0], 
}, { 
    name: "Bananas", 
    colorByPoint: true, 
    colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 50, 
    data: [0, 1.5, 0] 
}, { 
    name: "Oranges", 
    colorByPoint: true, 
    colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 30, 
    data: [0, 0, 3.9] 
} 

Вы были давая data объект, но он ожидает массив. Я устанавливаю 0 в значениях для балансировки множеств в других столбцах.

В первом объекте data атрибут, первое значение для яблок в первом столбце. Если вы измените второе значение, вы получите яблоки во втором столбце и так далее. В этом fiddle у вас есть яблоки во всех столбцах.

Для этого вам понадобится обновленный fiddle.