Javascript 带彩色背景栏的高图表
有可能得到如图所示的图表吗。主要目标是给每个时间单位一个不同的背景颜色,例如给图表中的每一天一个颜色Javascript 带彩色背景栏的高图表,javascript,highcharts,Javascript,Highcharts,有可能得到如图所示的图表吗。主要目标是给每个时间单位一个不同的背景颜色,例如给图表中的每一天一个颜色 这在Highcharts中没有直接的支持,而且据我所知,时间单位列不容易通过JS或CSS获得 但是,您可以访问绘图和plotBackgroundColor。如果您事先知道时间单位列的数量,这可能是您的解决方案。将plotBackgroundColor设置为使用linearGradient可能会给人一种错觉,即每列都有单独的颜色 示范: 正如您所见,您必须为每列使用两个停止点,并计算出每列所需的宽
这在Highcharts中没有直接的支持,而且据我所知,时间单位列不容易通过JS或CSS获得 但是,您可以访问绘图和plotBackgroundColor。如果您事先知道时间单位列的数量,这可能是您的解决方案。将plotBackgroundColor设置为使用linearGradient可能会给人一种错觉,即每列都有单独的颜色 示范:
正如您所见,您必须为每列使用两个停止点,并计算出每列所需的宽度百分比。在highcharts中,您可以使用它添加自定义形状 使用xAxis.plotbands完成垂直背景色,或使用yAxis.plotbands完成垂直背景色,如下所示:
xAxis: {
plotBands: [
{
from: ${x1},
to: ${x2},
color: ${color}
},
],
// more configuration...
}
$function{
$'container'.highcharts{
标题:{
文字:“月平均气温”,
},
副标题:{
文字:“来源:WorldClimate.com”,
},
xAxis:{
类型:'线性',
位置:[1,2,3,4,5,6,7,8,9,10,11,12],
绘图带:[
{from:1,to:2,color:'rgba127255127,0.5'},
{from:2,to:3,color:'rgba255,255,63,0.5'},
{从:3到:4,颜色:'rgba255,127,127,0.5'},
{from:4,to:6,color:'rgba255,255,63,0.5'},
{from:6,to:7,color:'rgba255,127,127,0.5'},
{from:7,to:8,color:'rgba127255127,0.5'},
{from:8,to:9,color:'rgba255,255,63,0.5'},
{从:9到:10,颜色:'rgba255,127,127,0.5'},
{from:10,to:12,color:'rgba127255127,0.5'},
],
标签:{
格式化程序:函数{
switchparseIntthis.value{
案例1:返回“Jan”;
案例2:返回“二月”;
案例3:返回“Mar”;
案例4:返回“Apr”;
案例5:返回“可能”;
案例6:返回“Jun”;
案例7:返回“七月”;
案例8:返回“八月”;
案例9:返回“Sep”;
案例10:返回“十月”;
案例11:返回“Nov”;
案例12:返回“Dec”;
默认值:返回'NaM'+this.value+;
}
}
}
},
亚克斯:{
标题:{
文字:“温度摄氏度”
}
},
系列:[
{
类型:'直线',//或'样条曲线'
名称:“气温”,
数据:[
{x:1,y:7.0},
{x:2,y:6.9},
{x:3,y:9.5},
{x:4,y:14.5},
{x:5,y:18.4},
{x:6,y:21.5},
{x:7,y:25.2},
{x:8,y:26.5},
{x:9,y:23.3},
{x:10,y:18.3},
{x:11,y:13.9},
{x:12,y:9.6}
]
},
{
名称:'水温',
数据:[
{x:1,y:3.9},
{x:2,y:4.2},
{x:3,y:5.7},
{x:4,y:8.5},
{x:5,y:11.9},
{x:6,y:15.2},
{x:7,y:17.0},
{x:8,y:16.6},
{x:9,y:14.2},
{x:10,y:10.3},
{x:11,y:6.6},
{x:12,y:4.8}
]
}
],
打印选项:{
系列:{
数据标签:{
已启用:true
},
enableMouseTracking:false
}
},
};
};