Question

我试图创建一个这样的排名图表：

条形图的颜色取决于测试中从0％到100％的成就百分比。

我无法找到使用相同系列的不同条形颜色的方法，并创建一个只有1个系列的多标签图例。我想按下图例并仅显示该颜色的条形。

编辑：

刚刚想出了如何绘制每个条形图，我可以在创建图表之前格式化数据。

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

代码

$(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>]
    }
]

使用条形范围颜色

1 个答案: