Highcharts проблемы

Question

Можете ли вы помочь мне с помощью Highcharts апи это изображение клиента хотят видеть:

Вот мой пример кода:

$(function() { 
    var yourLabels = ["Women", "Age", "Men"]; 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      categories: ["", "", ""] 
     }, 
     yAxis: { 
      stackLabels: { 
       enabled: true, 
       align: 'center' 
      } 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal', 
       pointPadding: 0, 
       groupPadding: 0, 
       dataLabels: { 
        enabled: false, 
        color: 'white' 
       } 
      } 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4] 
     }, { 
      data: [-144.0, -176.0, -135.6] 
     }] 
    }); 
}); 

Моя голова катится закодировать обзор Highcharts. Заранее спасибо!

Answer 1

Вам нужно установить довольно много вариантов, макет для вас: https://jsfiddle.net/ptysyo4p/13/

Длинная короткая история:

• использовать несколько рентгеновских осей для отображения категорий на верхней/средней/нижней части графика , связали их, используя linkedTo опцию
• использовать две оси y для отображения двух отдельных частей диаграммы. Управляйте этими позициями по top и height. Вторая ось связана с первой, но обратная - все равно может отображать положительные значения, как я ожидал.
• первой точка тяжело, я предлагаю, чтобы сделать transparent колонки там, чтобы отобразить метку и подсказки при наведении курсора мыши на эту метку

И код:

$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    legend: { 
     enabled: false 
    }, 
    tooltip: { 
     shared: true 
    }, 
    xAxis: [{ 
     id: "mainAxis", 
     top: '52%', 
     lineWidth: 0, 
     opposite: true, 
     categories: ["Age", "18-24", "25-34", "45-54"], 
     offset: 0, 
     labels: { 
      y: -1 
     } 
    }, { 
     linkedTo: 0, 
     showEmpty: true, 
     offset: 0, 
     lineWidth: 0, 
     categories: ["46%", "30%", "30%", "30%"], 
     opposite: true 
    }, { 
     linkedTo: 0, 
     showEmpty: true, 
     offset: 0, 
     lineWidth: 0, 
     categories: ["54%", "45%", "15%", "30%"], 
     opposite: false 
    }], 
    yAxis: [{ 
     height: '45%', 
     offset: 0, 
     title: { 
      text: "" 
     }, 
     labels: { 
      enabled: false 
     }, 
     endOnTick: true 
    }, { 
     top: '55%', 
     height: '45%', 
     reversed: true, 
     linkedTo: 0, 
     offset: 0, 
     title: { 
      text: "" 
     }, 
     labels: { 
      enabled: false 
     }, 
     endOnTick: true 
    }], 

    series: [{ 
     borderWidth: 0, 
     name: "Women", 
     data: [{ 
      y: 46, 
      color: "transparent", 
      dataLabels: { 
       enabled: true, 
       inside: true, 
       verticalAlign: "bottom", 
       format: "Women" 
      } 
     }, 
     30, 30, 30], 
     yAxis: 0 
    }, { 
     borderWidth: 0, 
     name: "Men", 
     data: [{ 
      y: 54, 
      color: "transparent", 
      dataLabels: { 
       enabled: true, 
       inside: true, 
       verticalAlign: "top", 
       format: "Men" 
      } 
     }, 45, 15, 30], 
     yAxis: 1 
    }] 
}); 

Теперь, конечно, вы должны иметь дело с цвета, фоны и т. д. Обратите внимание, что некоторые из параметров настроены так, чтобы соответствовать определенной высоте диаграммы, например xAxis[0].labels.y.