Highcharts根据价值改变栏的颜色 [英] Highcharts Change Bar Color Based on Value
本文介绍了Highcharts根据价值改变栏的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Highcharts，想知道是否有可能在条形图中获得前三名的结果，以获得不同的颜色条，然后是图表的其余部分？我从CSV文件填充图表。
这是我的javascript：
< code $ $（document）.ready（function（）{
var options = {
chart：{
renderTo：'container'，
defaultSeriesType ：'bar'
}，
标题：{
text：'精神礼物结果'
}，
颜色：[
'＃3BBEE3'
]，
xAxis：{
categories：[]
}，
yAxis：{
title：{
text： 'Service'
}
}，
series：[]
};
var data = document.getElementById（<％= hdn_Data。 （data.value！=）{
var lines = data.value.split（'\\\
'）;
//分割行
if ）;
//遍历行并添加类别或系列
$ .each（lines，function（lineNo，line）{
var items = line.split（' ，'）;
//标题行包含类别
if（lineNo == 0）{
$ .each（items，function（itemNo，item））{
if（itemNo> 0） options.xAxis.categories.push（item）;
}）;
}
//其余的行包含名字在第一位的数据
else {
var series = {
data：[]
};
$ .each（itemNo，item）{
if（itemNo == 0）{
series.name = item;
} else {
series.data.push（parseFloat（item））;
}
}）;
options.series.push（series）;
}
}）;
//创建图表
var chart1 = new Highcharts.Chart（options）;
}
}）;
以下是CSV示例：
类别，行政，福音，慈悲，牧养，领导，智慧，教学
总分，11,5,4,4,3,2,1
所以在这个例子中，我希望'行政管理'，'福音'和'慈悲'有一个'蓝色的酒吧颜色'，而'牧羊人'，'领导'等有'红色条形颜色'。
这可能吗？
这是小提琴
解决方案
根据OP的评论，强调我以前的答案。
正如你所做的那样，
series.name = item;
和
series.data.push（parseFloat（项目））;
像明智一样，您可以做，
series.color：'＃f6f6f6'
（在你的循环中，你可以根据你的情况改变颜色）
你可以做，
$（document）.ready（function（）{
var options = {
图表：{
renderTo：'container'，
defaultSeriesType：'bar'
}，
标题：{
text：'精神礼物结果'
}，
颜色：[
'＃3BBEE3'
]，
xAxis：{
类别：[]
}，
y轴线：{
title：{
text：'Service'
}
}，
series：[]
};
var data = document.getElementById（hdn_Data）;
//分割行
if（data.value！=）{
var lines = data.value.split（'\\\
'）;
//遍历线条并添加类别或系列
$ .each（lines，function（lineNo，line）{
var items = line.split（'，' ）;
//标题行包含类别
if（lineNo == 0）{
$ .each（items，function（itemNo，item））{
if（itemNo> 0）options.xAxis.categories.push（item）;
}）;
}
//其余的行包含名字在第一位置的数据
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）;
}
}）;
//创建图表
var chart1 = new Highcharts.Chart（options）;
}
}）;
请参阅这个，你可以用3种方式给 data 。我已经使用了第三个。
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.
Here is my 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:
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
解决方案
Based on OP's comment, striked my previous answer.
As you are doing,
series.name = item;
and
series.data.push(parseFloat(item));
Like wise, you can do,
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);
}
});
Refer this, you can give data in 3 ways. I've used the third one.
这篇关于Highcharts根据价值改变栏的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
