2016-09-24 4 views
0

Есть ли способ заказать этот графический план?highcharts - Как отсортировать категорию xAxis по количеству?

https://jsfiddle.net/bsvLnnxv/3/

Окончательный результат, ожидаемый в этом случае должно быть:

Имя 1 -> 19

Имя 4 -> 12

Имя 3 -> 10

Название 2 -> 8

Найти код belo ш:

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'column' 
 
     }, 
 
     title: { 
 
      text: 'Stacked column chart' 
 
     }, 
 
     xAxis: { 
 
      type: 'category' 
 
     }, 
 
     yAxis: { 
 
      min: 0, 
 
      title: { 
 
       text: 'Highchart test' 
 
      }, 
 
      stackLabels: { 
 
       enabled: true, 
 
       style: { 
 
       \t fontWeight: 'bold' 
 
      \t } 
 
      } 
 
     }, 
 
     legend: { 
 
      enabled: true 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'AAA', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 5, 
 
       drilldown: 'Name1AAA' 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 2 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 2 
 
      }] 
 
     }, { 
 
      name: 'BBB', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 10, 
 
       drilldown: 'Name1BBB' 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 5 
 
      }] 
 
     }, { 
 
      name: 'CCC', 
 
      data: [{ 
 
       name: 'Name 4', 
 
       y: 12 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 8 
 
      }, { 
 
       name: 'Name 1', 
 
       y: 4, 
 
       drilldown: 'Name1CCC' 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 1 
 
      }] 
 
     }], 
 
     
 
     drilldown: { 
 
      series: [{ 
 
       name: 'Name 1 - AAA', 
 
       id: 'Name1AAA', 
 
       data: [ 
 
        ['Name 1/1', 2], 
 
        ['Name 1/2', 2], 
 
        ['Name 1/3', 1], 
 
       ] 
 
      }, { 
 
       name: 'Name 1 - BBB', 
 
       id: 'Name1BBB', 
 
       data: [ 
 
        ['Name 1/1', 7], 
 
        ['Name 1/2', 2], 
 
        ['Name 1/3', 1], 
 
       ] 
 
      }, { 
 
       name: 'Name 1 - CCC', 
 
       id: 'Name1CCC', 
 
       data: [ 
 
        ['Name 1/1', 2], 
 
        ['Name 1/2', 3], 
 
        ['Name 1/3', 4], 
 
       ] 
 
      }] 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<script src="http://github.highcharts.com/modules/drilldown.js"></script> 
 

 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

+1

Возможный дубликат [Сортировка рядов данных для каждой оси X в Highcharts] (http://stackoverflow.com/questions/34565347/sort-the- серия-данные для каждой-х-оси-в-Highcharts) – melancia

ответ

2

Я нашел решение!

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

Еще одна точка внимания: если у вас нет значения, вам нужно будет установить значение как 0, чтобы убедиться, что все категории имеют одинаковое количество элементов.

https://jsfiddle.net/bsvLnnxv/4/

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'column' 
 
     }, 
 
     title: { 
 
      text: 'Stacked column chart' 
 
     }, 
 
     xAxis: { 
 
      type: 'category' 
 
     }, 
 
     yAxis: { 
 
      min: 0, 
 
      title: { 
 
       text: 'Highchart test' 
 
      }, 
 
      stackLabels: { 
 
       enabled: true, 
 
       style: { 
 
       \t fontWeight: 'bold' 
 
      \t } 
 
      } 
 
     }, 
 
     legend: { 
 
      enabled: true 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'AAA', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 5, 
 
       drilldown: 'Name1AAA' 
 
      }, { 
 
       name: 'Name 4', 
 
       y: 0 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 2 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 2 
 
      }] 
 
     }, { 
 
      name: 'BBB', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 10, 
 
       drilldown: 'Name1BBB' 
 
      }, { 
 
       name: 'Name 4', 
 
       y: 0 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 0 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 5 
 
      }] 
 
     }, { 
 
      name: 'CCC', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 4, 
 
       drilldown: 'Name1CCC' 
 
      }, { 
 
       name: 'Name 4', 
 
       y: 12 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 8 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 1 
 
      }] 
 
     }], 
 
     
 
     drilldown: { 
 
      series: [{ 
 
       name: 'Name 1 - AAA', 
 
       id: 'Name1AAA', 
 
       data: [ 
 
        ['Name 1/1', 2], 
 
        ['Name 1/2', 2], 
 
        ['Name 1/3', 1], 
 
       ] 
 
      }, { 
 
       name: 'Name 1 - BBB', 
 
       id: 'Name1BBB', 
 
       data: [ 
 
        ['Name 1/1', 7], 
 
        ['Name 1/2', 2], 
 
        ['Name 1/3', 1], 
 
       ] 
 
      }, { 
 
       name: 'Name 1 - CCC', 
 
       id: 'Name1CCC', 
 
       data: [ 
 
        ['Name 1/1', 2], 
 
        ['Name 1/2', 3], 
 
        ['Name 1/3', 4], 
 
       ] 
 
      }] 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<script src="http://github.highcharts.com/modules/drilldown.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Смежные вопросы