Highcharts сгруппированных гистограммы с несколькими осями

Question

Я был неудовлетворен ответом здесь: Multiple y-axes for column graph categories in highcharts

Я понимаю, что вы можете создать несколько у-оси могут выбрать их с помощью YAxis: 0,1,2 и т.д. для каждой серии , Можно ли это сделать для групп гистограмм?

В следующем примере я хочу 3 группы (граф A, граф B, процент), каждый из которых имеет 4 человека (Джон, Джо, Джейн, Джанет). Как это сделать в дополнение к тому, что группы подсчета по одной оси и группа процентов на другой?

$('#container').highcharts({ 
    chart: { type: 'column' }, 
    xAxis: { categories: ['Count A', 'Count B', 'Percent']}, 
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }], 

    series: [{ 
     name: 'John', 
     data: [5, 3, 0.4], 
    }, { 
     name: 'Joe', 
     data: [3, 4, 0.6], 
    }, { 
     name: 'Jane', 
     data: [2, 5, 0.7], 
    }, { 
     name: 'Janet', 
     data: [3, 0, 0.8], 
    }] 
}); 

Answer 1

Да, это абсолютно возможно, и вы были на правильном пути с исследованиями нескольких осей Y.

Ниже приведен фрагмент кода, основанный на демоверсии Highcharts из штабелированных и сгруппированных столбцов. Я добавил вторую ось y и скопировал некоторые демо-данные для назначения этой оси.

В соответствии с вашими требованиями вы найдете два набора или стеки данных, назначенных первой/по умолчанию оси y, и третий набор, назначенный второй/противоположной оси y.

$(function() { 
 
    $('#container').highcharts({ 
 

 
     chart: { 
 
      type: 'column' 
 
     }, 
 

 
     title: { 
 
      text: 'Total fruit consumtion, grouped by gender' 
 
     }, 
 

 
     xAxis: { 
 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
 
     }, 
 

 
     yAxis: [{ 
 
      allowDecimals: false, 
 
      min: 0, 
 
      title: { 
 
       text: 'Number of fruits' 
 
      } 
 
     },{ 
 
      allowDecimals: false, 
 
      min: 0, max: 100, 
 
      title: { 
 
       text: 'Percentage of fruits' 
 
      }, 
 
      opposite: true 
 
     }], 
 

 
     tooltip: { 
 
      formatter: function() { 
 
       return '<b>' + this.x + '</b><br/>' + 
 
        this.series.name + ': ' + this.y + '<br/>' + 
 
        'Total: ' + this.point.stackTotal; 
 
      } 
 
     }, 
 

 
     plotOptions: { 
 
      column: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 

 
     series: [{ 
 
      name: 'John', 
 
      data: [5, 3, 4, 7, 2], 
 
      stack: 'number' 
 
     }, { 
 
      name: 'Joe', 
 
      data: [3, 4, 4, 2, 5], 
 
      stack: 'number' 
 
     }, { 
 
      name: 'Jane', 
 
      data: [2, 5, 6, 2, 1], 
 
      stack: 'number2' 
 
     }, { 
 
      name: 'Janet', 
 
      data: [3, 0, 4, 4, 3], 
 
      stack: 'number2' 
 
     },{ 
 
      name: 'John', 
 
      data: [45, 30, 25, 70, 5], 
 
      stack: 'percentage', 
 
      yAxis: 1 
 
     }, { 
 
      name: 'Joe', 
 
      data: [25, 15, 40, 5, 5], 
 
      stack: 'percentage', 
 
      yAxis: 1 
 
     }, { 
 
      name: 'Jane', 
 
      data: [10, 50, 30, 5, 10], 
 
      stack: 'percentage', 
 
      yAxis: 1 
 
     }, { 
 
      name: 'Janet', 
 
      data: [20, 5, 5, 20, 80], 
 
      stack: 'percentage', 
 
      yAxis: 1 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>

Один совет: как и линейные диаграммы по различным осям, вы должны быть ясно, в документации, выбор цвета или меток диаграмм, чтобы пользователи знали, какие значения соответствуют каким ось. Это особенно необходимо для столбцов, так как пользователи, естественно, сравнивают высоты каждого столбца со своим соседом.

Я надеюсь, что это будет полезно для вас.

Answer 2

Итак, вот мое решение вашей проблемы. Надеюсь, это то, что вы ищете, и я надеюсь, что вы найдете это полезным.

Если вы хотите поместить данные в три категории с двумя разными yAxis, вам придется разделить их так последовательно. Процент связан с серией со значениями.

Если вы хотите вернуться к диаграмме столбцов, просто измените тип диаграммы на столбец.

http://jsfiddle.net/henrikskar/j1o450z5/

series: [{ 
     name: 'John', 
     id: 's1', 
     data: [5, 3], 
    },{ 
     //Links to id s1 
    linkedTo: 's1', 
    name: 'John', 
    data: [ 
      //Puts 0.4 percent to the third category which is in the second array position 
      //of the categories 
      [2, 0.4] 
    ], 
    //Assigns the percent to the second yAxis 
    yAxis: 1, 
    color: Highcharts.getOptions().colors[0] 
    },