Highcharts Изменение цвета бара в зависимости от значения

Я использую Highcharts, и мне было интересно, возможно ли, чтобы верхние 3 результата были в гистограмме, чтобы иметь другую цветную полосу, чем остальная часть диаграммы? Я заполняю диаграмму из файла CSV.

Вот мой JavaScript:

$(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'bar'
            },
            title: {
                text: 'Spiritual Gifts Results'
            },
            colors: [
                '#3BBEE3'
            ],
            xAxis: {
                categories: []
            },

            yAxis: {
                title: {
                    text: 'Service'
                }
            },
            series: []
        };

        var data = document.getElementById("<%= hdn_Data.ClientID %>");
        // Split the lines
        if (data.value != "") {
            var lines = data.value.split('\n');

            // Iterate over the lines and add categories or series
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                // header line containes categories
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) options.xAxis.categories.push(item);
                    });
                }
                // the rest of the lines contain data with their name in the first position
                else {
                    var series = {
                        data: []
                    };
                    $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            series.name = item;
                        } else {
                            series.data.push(parseFloat(item));
                        }
                    });

                    options.series.push(series);

                }

            });

            // Create the chart
            var chart1 = new Highcharts.Chart(options);
        }
    });

Вот пример CSV:

Categories,Administration,Evangelism,Mercy,Shepherding,Leadership,Wisdom,Teaching
Total Points,11,5,4,4,3,2,1

Таким образом, в этом примере я хотел бы "администрирования", "евангелизации" и "милосердия"; иметь «синий цвет полосы»; в то время как «Пастушье», «Лидерство»; и т.д. имеют «красный цвет».

Это возможно?

Здесь & APOS; sиграть на скрипке

Ответы на вопрос(3)

data: [
  { y: 34.4, color: 'red'},   // this point is red
  21.8,                        // default blue
  {y: 20.1, color: '#aaff99'}, // this will be greenish
  20                           // default blue
]                             
 06 янв. 2015 г., 17:14
Это на самом деле самый чистый подход, так как пример OP имеет проблемы анализа структуры данных, смешанные с форматированием точек данных. Вероятно, идеальным является сочетание пользовательского форматера с простой логикой и предварительным форматированием данных.
Решение Вопроса

As you are doing,

series.name = item; 

а также

series.data.push(parseFloat(item));

Как мудрый, вы можете сделать,

series.color: '#f6f6f6'

(in your loop you can change color based your conditions )

Ты можешь сделать,

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'bar'
        },
        title: {
            text: 'Spiritual Gifts Results'
        },
        colors: [
            '#3BBEE3'
            ],
        xAxis: {
            categories: []
        },

        yAxis: {
            title: {
                text: 'Service'
            }
        },
        series: []
    };

    var data = document.getElementById("hdn_Data");
    // Split the lines
    if (data.value != "") {
        var lines = data.value.split('\n');

        // Iterate over the lines and add categories or series
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            // header line containes categories
            if (lineNo == 0) {
                $.each(items, function(itemNo, item) {
                    if (itemNo > 0) options.xAxis.categories.push(item);
                });
            }
            // the rest of the lines contain data with their name in the first position
            else {
                var series = {
                    data: []
                };
                $.each(items, function(itemNo, item) {
                    var data = {};
                    if (itemNo == 0) {
                        series.name = item;
                    } else {
                        data.y = parseFloat(item);
                        if (itemNo <= 3) {
                            data.color = 'Gray';
                        }
                        else {
                            data.color = '#3BBEE3';
                        }
                        series.data.push(data);
                    }
                });
                options.series.push(series);
              }
            });

            // Create the chart
            var chart1 = new Highcharts.Chart(options);
        }
    });

скрипка

обращатьсяэтот, Вы можете датьdata 3 способами. Я использовал третий.

 mint29 мая 2012 г., 15:33
Спасибо, это, похоже, меняет цвет - но, похоже, меняет цвет для каждого элемента в графике, даже если я обернул его в условное выражение, кажется, изменился цвет каждого столбца в гистограмме. То, что я хочу, это изменить цвет полос для 3 верхних категорий.
 mint29 мая 2012 г., 16:22
Вот ссылка на скрипку:jsfiddle.net/vP2rM/6 (дайте мне знать, если это сработало, я никогда не возился)
 29 мая 2012 г., 15:41
Обновите здесь свой код, а также укажите ссылку на скрипку, чтобы я мог проверить
 10 сент. 2014 г., 10:02
Вот обновление страницы, которое дает 3 способа добавления данных:http://api.highcharts.com/highcharts#series
 29 мая 2012 г., 16:50
@mint, я обновил свой ответ, посмотрите на него. Отметить как ответ, если это поможет вам :)

При выполнении push вы должны иметь возможность установить цвет для этой точки. Я не слишком знаком с push, поскольку мы используем предварительно скомпилированный объект данных, который мы отправляем. Но внутри нашего .NET мы устанавливаем цвет (если необходимо) для конкретной точки и затем отправляем объект данных на диаграмму.

 mint25 мая 2012 г., 17:23
Я использую версию javascript ... не уверен, где эта функциональность будет для js, но я постараюсь посмотреть и посмотреть. Спасибо за направление.

Ваш ответ на вопрос