2015-04-20 3 views
-1

У меня есть несколько проблем с визуализацией двух столбцов в каждой стране в диаграмме столбцов Highcharts.Выравнивать категории оси x - Highcharts

Как исправить эту проблему и показать название страны для всех столбцов?

$(function() { 
 
    function sorter(a, b) { 
 
     return a[0] - b[0]; 
 
    } 
 
    
 
    $('#container').highcharts({ 
 
     title: { 
 
      text: '' 
 
     }, 
 
     xAxis: { 
 
      categories: [ 
 
       '2013<br>Canada', 
 
       '2014E', 
 
       '2013<br>Brazil', 
 
       '2014E', 
 
       '2013<br>Russia', 
 
       '2014E', 
 
       '2013<br>China', 
 
       '2014E', 
 
       '2013<br>UK', 
 
       '2014E', 
 
       '2013<br>India', 
 
       '2014E', 
 
       '2013<br>Germany', 
 
       '2014E', ], 
 
     }, 
 
     legend: { 
 
      enabled: false 
 
     }, 
 
     chart: { 
 
      type: 'column' 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     exporting: { 
 
      enabled: false 
 
     }, 
 
     series: [{ 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [10.1, 9.7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#77bbf1' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [1.1, 1.6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#2f78b2' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 6.8, 8.2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#f47467' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 6.4, 5.8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#bf2e1f' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 3.7, 5.7, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#5ed2a2' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 6.7, 5.7, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#108354' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 5, 5.4, 0, 0, 0, 0, 0, 0], 
 
      color: '#f9dd6e' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 2.8, 2.9, 0, 0, 0, 0, 0, 0], 
 
      color: '#d7a50c' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 2.4, 3.8, 0, 0, 0, 0], 
 
      color: '#BAD272' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 2.7, 2.3, 0, 0, 0, 0], 
 
      color: '#708829' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 2.3, 0, 0], 
 
      color: '#2da775' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10.9, 8.9, 0, 0], 
 
      color: '#108354' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1.5, 1.2], 
 
      color: '#e14d3e' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1.6, 1.8], 
 
      color: '#bf2e1f' 
 
     }], 
 
     yAxis: { 
 
      title: { 
 
       text: 'GDP, current prices, US$ tn', 
 
       rotation: 270, 
 
       margin: 10, 
 
       x: -10 
 
      }, 
 
      labels: { 
 
       formatter: function() { 
 
        return this.value + ''; 
 
       } 
 
      } 
 
     }, 
 
     tooltip: { 
 
      valueSuffix: ' US$ tn' 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script> 
 

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

Here is JSFiddle for the code above.

+2

Простой дает прибегая к помощи ваш ответ. Вы это проверили? http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories – akaya

ответ

0

Использование grouped_categories плагин Black Label в для Highcharts, вы можете выполнить группировку категорий оси х.

Просто измените следующие из:

xAxis: { 
    categories: [ 
     '2013<br>Canada', 
     '2014E', 
     '2013<br>Brazil', 
     '2014E', 
     '2013<br>Russia', 
     '2014E', 
     '2013<br>China', 
     '2014E', 
     '2013<br>UK', 
     '2014E', 
     '2013<br>India', 
     '2014E', 
     '2013<br>Germany', 
     '2014E', ], 
}, 

к этому:

xAxis: { 
    categories: [{ 
     name: "Canada", 
     categories: [ "2013", "2014E" ] 
    }, { 
     name: "Brazil", 
     categories: [ "2013", "2014E" ] 
    }, { 
     name: "Russia", 
     categories: [ "2013", "2014E" ] 
    }, { 
     name: "China", 
     categories: [ "2013", "2014E" ] 
    }, { 
     name: "UK", 
     categories: [ "2013", "2014E" ] 
    }, { 
     name: "India", 
     categories: [ "2013", "2014E" ] 
    }, { 
     name: "Germany", 
     categories: [ "2013", "2014E" ] 
    }], 
}, 

Кроме того, не забудьте включить grouped-categories.js script.


Demo

$(function() { 
 
    function sorter(a, b) { 
 
     return a[0] - b[0]; 
 
    } 
 
    
 
    $('#container').highcharts({ 
 
     title: { 
 
      text: '' 
 
     }, 
 
     xAxis: { 
 
      categories: [{ 
 
       name: "Canada", 
 
       categories: [ "2013", "2014E" ] 
 
      }, { 
 
       name: "Brazil", 
 
       categories: [ "2013", "2014E" ] 
 
      }, { 
 
       name: "Russia", 
 
       categories: [ "2013", "2014E" ] 
 
      }, { 
 
       name: "China", 
 
       categories: [ "2013", "2014E" ] 
 
      }, { 
 
       name: "UK", 
 
       categories: [ "2013", "2014E" ] 
 
      }, { 
 
       name: "India", 
 
       categories: [ "2013", "2014E" ] 
 
      }, { 
 
       name: "Germany", 
 
       categories: [ "2013", "2014E" ] 
 
      }], 
 
     }, 
 
     legend: { 
 
      enabled: false 
 
     }, 
 
     chart: { 
 
      type: 'column' 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     exporting: { 
 
      enabled: false 
 
     }, 
 
     series: [{ 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [10.1, 9.7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#77bbf1' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [1.1, 1.6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#2f78b2' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 6.8, 8.2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#f47467' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 6.4, 5.8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#bf2e1f' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 3.7, 5.7, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#5ed2a2' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 6.7, 5.7, 0, 0, 0, 0, 0, 0, 0, 0], 
 
      color: '#108354' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 5, 5.4, 0, 0, 0, 0, 0, 0], 
 
      color: '#f9dd6e' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 2.8, 2.9, 0, 0, 0, 0, 0, 0], 
 
      color: '#d7a50c' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 2.4, 3.8, 0, 0, 0, 0], 
 
      color: '#BAD272' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 2.7, 2.3, 0, 0, 0, 0], 
 
      color: '#708829' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 2.3, 0, 0], 
 
      color: '#2da775' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10.9, 8.9, 0, 0], 
 
      color: '#108354' 
 
     }, { 
 
      name: 'Growth in medical premiums above rate of general inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1.5, 1.2], 
 
      color: '#e14d3e' 
 
     }, { 
 
      name: 'General Inflation', 
 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1.6, 1.8], 
 
      color: '#bf2e1f' 
 
     }], 
 
     yAxis: { 
 
      title: { 
 
       text: 'GDP, current prices, US$ tn', 
 
       rotation: 270, 
 
       margin: 10, 
 
       x: -10 
 
      }, 
 
      labels: { 
 
       formatter: function() { 
 
        return this.value + ''; 
 
       } 
 
      } 
 
     }, 
 
     tooltip: { 
 
      valueSuffix: ' US$ tn' 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script> 
 
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script> 
 

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

+0

thx, это хорошая работа для меня! – elektrobober

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