HighCharts之图表背景设置

简介:  为HighCharts设置XAxis的PlotBands属性,全部代码如下:Highcharts chart = new Highcharts("HC" + divName) .

 为HighCharts设置XAxis的PlotBands属性,全部代码如下:

Highcharts chart = new Highcharts("HC" + divName)
               .InitChart(new Chart
               {
                   DefaultSeriesType = CT_type,
                   Width = _width,
                   Height = _height,
                   ClassName = _Title,
                   BackgroundColor = null
               }).SetCredits(new Credits { Enabled = false })
               .SetTitle(new Title
               {
                   Text = _Title
               })
               .SetXAxis(new XAxis
               {
                   Title = new XAxisTitle { Text = "单位:" + unitName },
                   Categories = xCategoryList.ToArray(),
                   Reversed = false,
                   Opposite = false,
                   PlotBands = new[]{
                     new  XAxisPlotBands{
                      Color=ColorTranslator.FromHtml("#FCFFC5"),
                      From=7,
                      To=12,
                      Label=new XAxisPlotBandsLabel {Text="上午工作时间"}
                     },
                    new XAxisPlotBands{
                      Color=ColorTranslator.FromHtml("#FCFFC5"),
                      From=13,
                      To=18,
                      Label=new XAxisPlotBandsLabel {Text="下午工作时间"}                    
                    }                   
                   }
               })
               .SetYAxis(new YAxis
               {
                   Title = new YAxisTitle { Text = "单位:" + SeriesUnit },
                   Min = 0,
                   PlotLines = new[]
                                          {
                                              new YAxisPlotLines
                                              {
                                                  Value = 0,
                                                  Width = 1,
                                                  Color = ColorTranslator.FromHtml("#808080")
                                              }        }
               })
               .SetTooltip(new Tooltip
               {
                   Formatter = ToolTip_info,
                   ValueDecimals = 2
               })
                .SetPlotOptions(new PlotOptions
                {
                    Column = new PlotOptionsColumn
                    {
                        BorderWidth = 2,
                        BorderColor = ColorTranslator.FromHtml("#edc240")
                    }
                })
               .SetLegend(new Legend
               {
                   Enabled = false
               })
               .SetSeries(new[]
                           {
                               new Series { Name ="", Data = new Data(yDataSeriesList.ToArray()),Color=ColorTranslator.FromHtml("#f5e2a7")}
                           }
                 );
                return chart.ToHtmlString();


相关文章
|
6月前
|
JSON JavaScript 前端开发
ECharts图表制作
ECharts图表制作
43 0
|
10月前
|
定位技术
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
116 0
|
24天前
|
搜索推荐 数据可视化 Python
Matplotlib高级技巧:自定义图表样式与布局
【4月更文挑战第17天】本文介绍了Matplotlib的高级技巧,包括自定义图表样式和布局。通过设置`color`、`linestyle`、`marker`参数,可以改变线条、散点的颜色和样式;使用自定义样式表实现整体风格统一。在布局方面,利用`subplots`创建多子图,通过`gridspec`调整复杂布局,`subplots_adjust`优化间距,以及添加图例和标题增强可读性。掌握这些技巧能帮助创建更具吸引力的个性化图表。
|
4月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
10月前
Echarts渐变折线图的设置解决方案
Echarts渐变折线图的设置解决方案
80 0
|
7月前
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
31 0
|
10月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
416 0
|
10月前
|
数据可视化 定位技术 数据格式
漏刻有时数据可视化Echarts组件开发(18):渐变透明柱状图和地图map结合的案例
漏刻有时数据可视化Echarts组件开发(18):渐变透明柱状图和地图map结合的案例
105 0
|
10月前
Echarts实战案例代码(42):饼图不同区域的渐变实现的解决方案
Echarts实战案例代码(42):饼图不同区域的渐变实现的解决方案
96 0
|
10月前
Echarts折线图渐变色的属性设置解决方案
Echarts折线图渐变色的属性设置解决方案
70 0