Highcharts根据价值改变酒吧的颜色

Question

我使用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 

在这个例子中，我想为 '管理'

所以， '福音' 和 '怜悯'当“牧羊人”，“领导力”等具有“红色条形颜色”时具有“蓝色条形颜色”。

这可能吗？

这里的fiddle

Answer 1

根据OP的评论，抨击我以前的答案。

当你正在做的，

series.name = item; 

和

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

像明智的，你可以做，

series.color: '#f6f6f6' 

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

你可以做，

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

参考this，您可以通过3种方式给data。我用过第三个。

Answer 2

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

Answer 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 
]