为highcharts中的每列设置不同的颜色
set different colors for each column in highcharts
我需要动态地为Highcharts图表中的每列设置不同的颜色。我的Highcharts图表是:
options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos',
'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: "Amount",
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};
数据是这样设置的:
for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push(parseInt(Data[i]));
} else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);
我如何动态地为这个循环中的每个数据点设置不同的颜色?
这是Highcharts最新版本(目前为3.0)的另一个解决方案。
设置colorByPoint选项为true,并定义你想要的颜色序列。
options = {
chart: {...},
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
'#ff0000',
'#00ff00',
'#0000ff'
]
}
下面是一个基于Highcharts Column和旋转标签的示例demo
当您将值添加到系列中时。数据你也可以使用点选项设置颜色,例如
series.data.push({ y: parseInt(Data[i]), color: '#FF0000' });
For more details about the point options see https://api.highcharts.com/class-reference/Highcharts.Point#color
Try either of these approaches:
Approach 1:
Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });
方法2:
var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];
$('#bar_chart').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: '',
colorByPoint: true,
data: [{
name: 'Blue',
y: 5.78,
color: colors[0]
}, {
name: 'Green',
y: 5.19,
color: colors[1]
}, {
name: 'Pink',
y: 32.11,
color: colors[2]
}, {
name: 'Yellow',
y: 10.04,
color: colors[3]
}, {
name: 'Purple',
y: 19.33,
color: colors[4]
}]
}]
});
我有API响应和2系列的颜色。第二个系列具有动态色彩。
下面是在序列映射时设置动态颜色的示例。
const response = [{
'id': 1,
'name': 'Mango',
'color': '#83d8b6',
'stock': 12.0,
'demand': 28,
},
{
id ': 2,
'name': 'Banana',
'color': '#d7e900',
'stock': 12.0,
'demand': 28,
}
];
let chartData: {
categories: [],
series: []
};
chartData.categories = response.map(x => x.name);
chartData.series.push({
name: 'Series 1',
type: 'column',
data: response.map(x => x.demand)
});
chartData.series.push({
name: 'Series 2',
type: 'column',
data: response.map(x => ({
y: x.stock,
color: x.color // set color here dynamically
}))
});
console.log('chartData: ', chartData);
你还可以阅读更多关于Highcharts系列Point and Marker
相关文章:
- 为Fullcalendar中的特定时段设置不同的颜色
- 使用javascript onclick设置CSS颜色
- j查询如何设置/取消设置下拉菜单的背景颜色
- 如何使用chartjs设置条形图中每个条形图的颜色
- 使用JS将页面中的每个字母设置为随机颜色.为什么在页面的每个打开标记之前总是有一组额外的span标记
- Highcharts.js设置用于更改列颜色的阈值
- 如何将字体颜色或背景颜色设置为javascript confim框
- 使用 JS 将图像的特定背景颜色设置为透明
- 如何在 CSS 中将颜色设置为用户的链接颜色
- 将背景颜色设置为SAPUI5中的输入框
- 使用存储的颜色设置ng中的动态背景颜色重复
- 如何将画布背景颜色设置为闪烁'n'秒
- Snap.load()一个svg img并为其填充颜色设置动画's子节点
- 如何将背景颜色设置为具有与url锚相同id的元素
- 我已经将背景颜色设置为白色,但是父元素的不透明度如何影响它
- 如何将Greasemonkey中的字符串颜色设置为红色
- 如何移动谷歌图表的颜色设置从文件到另一个
- 谷歌图表-如何从数据中移动颜色设置
- 将背景颜色设置为范围输入的值
- 将 Mouserover 背景颜色设置为无