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();


相关文章
|
存储 监控 Linux
linux搭建EwoMail开源邮件服务器软件
linux搭建EwoMail开源邮件服务器软件
199 0
|
缓存 JavaScript
请问如何在 keep-alive 组件中设置缓存的最大数量和过期时间
请问如何在 keep-alive 组件中设置缓存的最大数量和过期时间
|
存储 数据采集 分布式计算
Java中的大数据处理与分析架构
Java中的大数据处理与分析架构
|
安全 前端开发 中间件
中间件中HTTP/HTTPS 协议
【6月更文挑战第3天】
245 3
|
JavaScript 前端开发 CDN
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解
|
Ubuntu 数据安全/隐私保护 虚拟化
Ubuntu和Windows之间文件无损互传
Ubuntu和Windows之间文件无损互传
968 0
|
数据采集 机器人 数据挖掘
提升企业绩效!用八爪鱼RPA实现员工绩效考核的绝佳方法!
RPA机器人可以帮助客户完成考勤到业务系统下载考勤报告、数据分析透视和邮件发送等系列工作内容。凭借7x24小时的工作优势,帮助人力资源团队在每月、每季度重要节点高效完成工作,节省时间
|
存储 关系型数据库 MySQL
MySQL | 数据库的表的增删改查【进阶】【万字详解】(一)
MySQL | 数据库的表的增删改查【进阶】【万字详解】(一)
|
JavaScript
vue将日期数据转换成字符串
vue将日期数据转换成字符串
370 0