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 } }, }; };