在HighCharts行上应用自定义颜色?

在HighCharts行上应用自定义颜色?,highcharts,timeline,gantt-chart,Highcharts,Timeline,Gantt Chart,我找到了一个解决办法,用海图绘制甘特图。很高兴知道,我们可以用美妙的库海图制作甘特图,但我想应用自定义颜色。也许我尝试了在API中找到的所有可能性 //定义应用程序 var应用程序=[{ 名称:“App1”, 间隔:[{//从到对 起始日期:UTC(2015年0月5日), 截止日期:UTC(2015年0月6日), //我们不能为每个数据指定单一的颜色,即使我们提供了一个包含命名间隔值和颜色的对象数组。 颜色:“#FF4719” }, { 起始日期:UTC(2015年0月12日), 截止日期:U

我找到了一个解决办法,用海图绘制甘特图。很高兴知道,我们可以用美妙的库海图制作甘特图,但我想应用自定义颜色。也许我尝试了在API中找到的所有可能性

//定义应用程序
var应用程序=[{
名称:“App1”,
间隔:[{//从到对
起始日期:UTC(2015年0月5日),
截止日期:UTC(2015年0月6日),
//我们不能为每个数据指定单一的颜色,即使我们提供了一个包含命名间隔值和颜色的对象数组。
颜色:“#FF4719”
}, {
起始日期:UTC(2015年0月12日),
截止日期:UTC(2015年0月16日)
,颜色:“#2EB82E”
}]
//我们可以指定线条的单一颜色
//,颜色:“#2EB82E”
}, {
名称:“App2”,
间隔:[{//从到对
日期:UTC(2015年0月7日),
截止日期:UTC(2015年0月9日)
//我们不能为每个数据指定单一的颜色,即使我们提供了一个包含命名间隔值和颜色的对象数组。
,颜色:“#FFFF19”
}, {
日期:UTC(2015年0月26日),
截止日期:UTC(2015年1月6日)
,颜色:“#3366FF”
}]
//我们可以指定线条的单一颜色
//,颜色:“#3366FF”
}, {
名称:“App3”,
间隔:[{//从到对
日期:UTC(2015年1月20日),
截止日期:UTC(2015年1月21日),
标签:“意外事件1”
//我们不能为每个数据指定单一的颜色,即使我们提供了一个包含命名间隔值和颜色的对象数组。
,颜色:“#E62EB8”
}, {
日期:UTC(2015年2月11日),
截止日期:UTC(2015年2月13日)
,颜色:“#8A5C2E”
}, {
日期:UTC(2015年2月19日),
截止日期:UTC(2015年2月20日),
标签:“意外事件2”
,颜色:“#006699”
}, {
日期:UTC(2015年2月23日),
截止日期:UTC(2015年2月27日)
,颜色:“#666699”
}]
//我们可以指定线条的单一颜色
//,颜色:“#666699”
}, {
名称:“App4”,
间隔:[{//从到对
起始日期:UTC(2015年2月2日),
截止日期:UTC(2015年2月31日)
//我们不能为每个数据指定单一的颜色,即使我们提供了一个包含命名间隔值和颜色的对象数组。
,颜色:“#339966”
}]
//,颜色:“#339966”
}];
//将应用程序重新构造为行序列var series=[];
var系列=[];
$.each(applications.reverse(),函数(i,application){
变量项={
名称:application.name,
数据:[],
pointStart:Date.UTC(2015,0,1),
点间距:3*24*3600*1000
};
$.each(application.interval,函数(j,interval){
item.data.push({
x:interval.from,
y:我,
标签:interval.label,
from:interval.from,
to:interval.to,
颜色:interval.color
}, {
x:interval.to,
y:我,
from:interval.from,
to:interval.to,
颜色:interval.color
});
//在间隔之间添加空值
if(应用间隔[j+1]){
item.data.push(
[(interval.to+application.interval[j+1].from)/2,null]
);
}
});
系列.推(项);
});
//创建图表
var图表=新的Highcharts.图表({
图表:{
renderTo:“容器”
},
标题:{
文本:“部署规划”
},
xAxis:{
//开始每周:1,,
键入:“日期时间”,
标签:{
格式化程序:函数(){
返回Highcharts.dateFormat(“%e%b”,此.value);
}
}
},
亚克斯:{
时间间隔:1,
标签:{
格式化程序:函数(){
if(应用程序[this.value]){
返回应用程序[this.value].name;
}
}
},
startOnTick:错,
恩东蒂克:错,
标题:{
文本:“应用程序”
},
最小填充:0.2,
最大填充:0.2
},
图例:{
已启用:false
},
工具提示:{
格式化程序:函数(){
返回“”+应用程序[this.y].name+'
+ Highcharts.dateFormat(“%Y-%m-%d”,this.point.options.from)+ “-”+Highcharts.dateFormat(“%Y-%m-%d”,this.point.options.to); } }, //我们可以根据线条定义颜色图表 //颜色:['#B572A7'], 打印选项:{ 系列:{ //我们可以指定线条的单一颜色 //线条颜色:“#303030” //lineColor:function(){ //返回this.point.options.color; //返回“#303030”; //}, }, 行:{ 线宽:9, //我们可以指定线条的单一颜色 //颜色:“#B572A7”, //我们无法使函数(){…}获得每个点的颜色。选项或只返回一种颜色! //颜色:函数(){ //返回this.point.options.color; //返回“#B572A7”; //}, 标记:{ 已启用:false }, 数据标签:{ 启用:对, 对齐:“左”, 格式化程序:函数(){ 返回this.point.options&&this.point.options.label; } } } }, 系列:系列 });


不幸的是,您不能为单个系列(线上的点)设置不同的颜色。

我找到了另一种方法来绘制具有高库存的甘特图!我用了柱状极差图,现在我得到了我想要的:D

Highcharts.setOptions({
朗:{
月份:['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aoút','Septbrare','Octobre','Novenbrae','Décembre'],
工作日:[“迪曼奇”