Javascript Highcharts 根据值更改条形颜色

Highcharts Change Bar Color Based on Value

提问by mint

I'm using Highcharts and was wondering if it was possible to have the top 3 results in a bar chart to have a different color bar then the rest of the chart? I'm populating the chart from a CSV file.

我正在使用 Highcharts 并想知道是否有可能让条形图中的前 3 个结果与图表的其余部分具有不同的颜色条？我正在从 CSV 文件填充图表。

Here is my javascript:

这是我的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);
        }
    });

Here is a sample CSV:

这是一个示例 CSV：

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

So in this example I'd like for 'Administration', 'Evangelism', and 'Mercy' to have a 'blue bar color' while the 'Shepherding', 'Leadership' etc. have a 'red bar color'.

所以在这个例子中，我希望“管理”、“福音”和“慈悲”有一个“蓝条颜色”，而“牧羊人”、“领导”等有一个“红条颜色”。

Is this possible?

这可能吗？

Here's fiddle

这是小提琴

采纳答案by Jashwant

Based on OP's comment, striked my previous answer.

根据 OP 的评论，打击了我之前的回答。

As you are doing,

正如你所做的那样，

series.name = item; 

and

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

Like wise, you can do,

series.color: '#f6f6f6'

series.name = item; 

和

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

像智者一样，你可以做到，

series.color: '#f6f6f6'

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

（在您的循环中，您可以根据您的条件更改颜色）

You can do,

你可以做，

$(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);
        }
    });

Fiddle

小提琴

Refer this, you can give datain 3 ways. I've used the third one.

参考这个，你可以data通过3种方式给予。我用过第三个。

回答by AmirtharajCVijay

Here is a Example

这是一个例子

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
]                             

回答by wergeld

Yes, In your push execution you should be able to set color for that point. I am not too familiar with push as we use a precompiled data object that we send. But inside of our .NET we set the color (if needed) on a particular point and then send the data object to the chart.

是的，在您的推送执行中，您应该能够为该点设置颜色。我对推送不太熟悉，因为我们使用我们发送的预编译数据对象。但是在我们的 .NET 内部，我们在特定点上设置颜色（如果需要），然后将数据对象发送到图表。