創建排名表中Higcharts與條範圍的色彩

Question

我試圖創建一個排名表是這樣的：

ranking chart

凡欄的顏色取決於成就％從0％到100 ％在測試中。

我無法找到使用同一系列的不同條形顏色的方法，並創建一個只有1個系列的多標籤圖例。我想按下圖例並僅顯示該顏色的條形。

編輯：

只是想出我們怎麼畫的每個酒吧，IM OK創建我的圖表前，格式化數據。

我會粘貼新代碼，我只需要添加帶有任何顏色信息和過濾器的圖例。

CODE

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Ranking alumnos' 
    }, 
    subtitle: { 
     text: 'El color de la barra indica el nivel de logro' 
    }, 
    xAxis: { 
     categories: ['Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo','Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo', 'Alumno de ejemplo'], 
     title: { 
      text: null 
     } 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Logro total %', 
      align: 'high' 
     }, 
     labels: { 
      overflow: 'justify' 
     } 
    }, 
    tooltip: { 
     valueSuffix: ' %' 
    }, 
    plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'bottom', 
     x: -40, 
     y: 80, 
     floating: true, 
     borderWidth: 1, 
     backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
     shadow: true 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Logro %', 
     data: [ 
      {y: 100 , color: '#aaff99'}, 
      {y: 98, color: '#aaff99'}, 
      {y: 95 , color: '#aaff99'}, 
      {y: 90, color: '#aaff99'}, 
      {y: 85 , color: '#aaff99'}, 
      {y: 84, color: '#aaff99'}, 
      {y: 83 , color: '#aaff99'}, 
      {y: 82, color: '#aaff99'}, 
      {y: 81, color: '#aaff99'}, 
      {y: 81 , color: '#aaff99'}, 

      {y: 75, color: 'yellow'}, 
      {y: 75 , color: 'yellow'}, 
      {y: 74, color: 'yellow'}, 
      {y: 73 , color: 'yellow'}, 
      {y: 70, color: 'yellow'}, 
      {y: 65, color: 'yellow'}, 
      {y: 64 , color: 'yellow'}, 
      {y: 61, color: 'yellow'}, 
      {y: 61 , color: 'yellow'}, 
      {y: 61, color: 'yellow'} , 

      {y: 60, color: 'orange'}, 
      {y: 60 , color: 'orange'}, 
      {y: 58, color: 'orange'}, 
      {y: 56 , color: 'orange'}, 
      {y: 54, color: 'orange'}, 
      {y: 53, color: 'orange'}, 
      {y: 53 , color: 'orange'}, 
      {y: 51, color: 'orange'}, 
      {y: 51 , color: 'orange'}, 
      {y: 51, color: 'orange'}, 

      {y: 50, color: 'red'}, 
      {y: 50 , color: 'red'}, 
      {y: 49, color: 'red'}, 
      {y: 48 , color: 'red'}, 
      {y: 48, color: 'red'}, 
      {y: 48, color: 'red'}, 
      {y: 46 , color: 'red'}, 
      {y: 46, color: 'red'}, 
      {y: 46 , color: 'red'}, 
      {y: 46, color: 'red'} 




     ] 
    }] 
}); 

}）;

http://jsfiddle.net/re0q5fnv/

我感謝你的幫助。

Answer 1

喜歡的東西..（我想在你的jsfiddle）

legend: { 

     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'bottom', 
     borderWidth: 1, 
     backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
     shadow: true 
    } 


series: [{ 
     name: 'Logro orange %', 
     color: 'red' 
     },{ 
     name: 'Logro orange %', 
     color: 'orange' 
     },{ 
     name: 'Logro yellow %', 
     color: 'yellow', 
     data: [ <your data>] 
    } 
]