Highcharts 使用条形图范围颜色在Higcharts中创建排名图

Highcharts 使用条形图范围颜色在Higcharts中创建排名图,highcharts,Highcharts,我正在尝试创建一个如下的排名图: 其中,条形图的颜色取决于测试中从0%到100%的成绩百分比 我找不到方法使用同一系列不同的酒吧颜色,并创建一个多标签图例只有一个系列。我想按下图例,只显示该颜色的条 编辑: 我只知道如何绘制每个条形图,我可以在创建图表之前格式化数据 我将粘贴新代码,我只需要添加任何颜色信息和过滤器的图例 代码 })) 我感谢你的帮助。类似于。。(我在你的肚子里试过) 图例:{ 布局:“垂直”, 对齐:“右”, 垂直排列:“底部”, 边框宽度:1, 背景颜色:((Highch

我正在尝试创建一个如下的排名图:

其中,条形图的颜色取决于测试中从0%到100%的成绩百分比

我找不到方法使用同一系列不同的酒吧颜色,并创建一个多标签图例只有一个系列。我想按下图例,只显示该颜色的条

编辑:

我只知道如何绘制每个条形图,我可以在创建图表之前格式化数据

我将粘贴新代码,我只需要添加任何颜色信息和过滤器的图例

代码

}))

我感谢你的帮助。

类似于。。(我在你的肚子里试过)

图例:{
布局:“垂直”,
对齐:“右”,
垂直排列:“底部”,
边框宽度:1,
背景颜色:((Highcharts.theme&&Highcharts.theme.legendBackgroundColor)| |'#FFFFFF'),
影子:对
}
系列:[{
名称:“Logro橙色%”,
颜色:“红色”
},{
名称:“Logro橙色%”,
颜色:“橙色”
},{
名称:“Logro黄色%”,
颜色:'黄色',
数据:[]
}
]

谢谢您的帮助,但我需要的是每个“Alumno de Ejempo”1条,而不是3条,就像我在开始时发布的图表一样。
$(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'} 




        ]
    }]
});
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>]
    }
]