增加Background背景组件

Assets/XCharts/CHANGELOG.md

@@ -1,6 +1,7 @@
 
 # 更新日志
 
+* (2020.05.21) 增加`Background`背景组件
 * (2020.05.19) 隐藏`Hierarchy`试图下自动生成的子节点
 * (2020.05.18) 增加`chartName`属性可指定图表的别称，可通过`XChartMgr.Instance.GetChart(chartName)`获取图表
 * (2020.05.16) 增加部分鼠标事件回调

Assets/XCharts/Documentation/XChartsAPI.md

@@ -62,6 +62,7 @@
 * `BaseChart.ClickLegendButton(int legendIndex, string legendName, bool show)`：点击图例按钮。
 * `BaseChart.IsInChart(Vector2 local)`：坐标是否在图表范围内。
 * `BaseChart.IsInChart(float x, float y)`：坐标是否在图表范围内。
+* `BaseChart.EnableBackground(bool flag)`：开启背景组件。背景组件在`chart`受上层布局控制时无法开启。
 
 ## `CoordinateChart`
 

Assets/XCharts/Documentation/XCharts配置项手册.md

@@ -7,6 +7,7 @@
 主组件：
 
 * [Axis 坐标轴](#XAxis)  
+* [Background 背景图](#Background)  
 * [DataZoom 区域缩放](#DataZoom)  
 * [Grid 网格](#Grid)  
 * [Legend 图例](#Legend)  
@@ -342,6 +343,21 @@
 * `IsValue()`：是否为数值轴。
 * `AddData(string category, int maxDataNumber)`：添加一个类目到类目数据列表。
 
+## `Background`
+
+背景组件。
+由于框架的局限性，背景组件在`chart`受上层布局控制时不适用。因为背景组件节点和`chart`节点是同一级的。
+自动布局下的一种解决方案是，可以将`chart`节点再包一层`parent`。
+背景组件的开启需要通过接口来开启：`BaseChart.EnableBackground(bool flag)`
+
+相关参数：
+
+* `show`：是否显示启用背景组件。注意背景组件在`chart`受上层布局控制时不适用。
+* `image`：背景图。
+* `imageType`：背景图填充类型。
+* `imageColor`背景图颜色。默认`white`。
+* `hideThemeBackgroundColor`：当背景组件启用时，是否隐藏主题中设置的背景色。
+
 ## `YAxis`
 
 直角坐标系 `grid` 中的 `Y` 轴。单个 `grid` 组件最多只能放左右两个 `Y` 轴。两个 `Y` 轴存储在 `yAxises` 中。

Assets/XCharts/Editor/BaseChartEditor.cs

@@ -23,6 +23,7 @@ namespace XCharts
         protected SerializedProperty m_ChartHeight;
         protected SerializedProperty m_Theme;
         protected SerializedProperty m_ThemeInfo;
+        protected SerializedProperty m_Background;
         protected SerializedProperty m_Title;
         protected SerializedProperty m_Legend;
         protected SerializedProperty m_Tooltip;
@@ -30,6 +31,7 @@ namespace XCharts
         protected SerializedProperty m_Settings;
         protected SerializedProperty m_Large;
         protected SerializedProperty m_ChartName;
+        protected SerializedProperty m_DebugMode;
 
         protected float m_DefaultLabelWidth;
         protected float m_DefaultFieldWidth;
@@ -46,6 +48,7 @@ namespace XCharts
             m_ChartHeight = serializedObject.FindProperty("m_ChartHeight");
             m_Theme = serializedObject.FindProperty("m_Theme");
             m_ThemeInfo = serializedObject.FindProperty("m_ThemeInfo");
+            m_Background = serializedObject.FindProperty("m_Background");
             m_Title = serializedObject.FindProperty("m_Title");
             m_Legend = serializedObject.FindProperty("m_Legend");
             m_Tooltip = serializedObject.FindProperty("m_Tooltip");
@@ -53,6 +56,7 @@ namespace XCharts
 
             m_Large = serializedObject.FindProperty("m_Large");
             m_Settings = serializedObject.FindProperty("m_Settings");
+            m_DebugMode = serializedObject.FindProperty("m_DebugMode");
         }
 
         public override void OnInspectorGUI()
@@ -70,6 +74,7 @@ namespace XCharts
             OnMiddleInspectorGUI();
             OnEndInspectorGUI();
 
+            EditorGUILayout.PropertyField(m_DebugMode);
             CheckWarning();
             serializedObject.ApplyModifiedProperties();
         }
@@ -77,9 +82,17 @@ namespace XCharts
         protected virtual void OnStartInspectorGUI()
         {
             EditorGUILayout.PropertyField(m_Script);
-            EditorGUI.BeginChangeCheck();
+
             EditorGUILayout.PropertyField(m_ChartName);
             EditorGUILayout.PropertyField(m_ThemeInfo, true);
+            EditorGUI.BeginChangeCheck();
+            EditorGUILayout.PropertyField(m_Background, true);
+
+            var m_Show = m_Background.FindPropertyRelative("m_Show");
+            if (m_Show.boolValue && !m_Target.CanShowBackgroundComponent())
+            {
+                EditorGUILayout.HelpBox("can't show background component:chart is control by LayoutGroup.", MessageType.Warning);
+            }
             EditorGUILayout.PropertyField(m_Title, true);
             EditorGUILayout.PropertyField(m_Legend, true);
             EditorGUILayout.PropertyField(m_Tooltip, true);

Assets/XCharts/Editor/PropertyDrawers/BackgroundDrawer.cs

@@ -0,0 +1,67 @@
+/******************************************/
+/*                                        */
+/*     Copyright (c) 2018 monitor1394     */
+/*     https://github.com/monitor1394     */
+/*                                        */
+/******************************************/
+
+using UnityEditor;
+using UnityEngine;
+
+namespace XCharts
+{
+    [CustomPropertyDrawer(typeof(Background), true)]
+    public class BackgroundDrawer : PropertyDrawer
+    {
+        private bool m_BackgroundModuleToggle = false;
+
+        public override void OnGUI(Rect pos, SerializedProperty prop, GUIContent label)
+        {
+            Rect drawRect = pos;
+            drawRect.height = EditorGUIUtility.singleLineHeight;
+
+            SerializedProperty m_Show = prop.FindPropertyRelative("m_Show");
+            SerializedProperty m_Image = prop.FindPropertyRelative("m_Image");
+            SerializedProperty m_ImageType = prop.FindPropertyRelative("m_ImageType");
+            // SerializedProperty m_Left = prop.FindPropertyRelative("m_Left");
+            // SerializedProperty m_Right = prop.FindPropertyRelative("m_Right");
+            // SerializedProperty m_Top = prop.FindPropertyRelative("m_Top");
+            // SerializedProperty m_Bottom = prop.FindPropertyRelative("m_Bottom");
+            SerializedProperty m_ImageColor = prop.FindPropertyRelative("m_ImageColor");
+            SerializedProperty m_HideThemeBackgroundColor = prop.FindPropertyRelative("m_HideThemeBackgroundColor");
+
+            ChartEditorHelper.MakeFoldout(ref drawRect, ref m_BackgroundModuleToggle, "Background", m_Show);
+            EditorGUI.LabelField(drawRect, "Background", EditorStyles.boldLabel);
+            drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+            if (m_BackgroundModuleToggle)
+            {
+                ++EditorGUI.indentLevel;
+                EditorGUI.PropertyField(drawRect, m_Image);
+                drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                EditorGUI.PropertyField(drawRect, m_ImageType);
+                drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                // EditorGUI.PropertyField(drawRect, m_Left);
+                // drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                // EditorGUI.PropertyField(drawRect, m_Right);
+                // drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                // EditorGUI.PropertyField(drawRect, m_Top);
+                // drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                // EditorGUI.PropertyField(drawRect, m_Bottom);
+                // drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                EditorGUI.PropertyField(drawRect, m_ImageColor);
+                drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                EditorGUI.PropertyField(drawRect, m_HideThemeBackgroundColor);
+                drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                --EditorGUI.indentLevel;
+            }
+        }
+
+        public override float GetPropertyHeight(SerializedProperty prop, GUIContent label)
+        {
+            if (m_BackgroundModuleToggle)
+                return 5 * EditorGUIUtility.singleLineHeight + 4 * EditorGUIUtility.standardVerticalSpacing;
+            else
+                return 1 * EditorGUIUtility.singleLineHeight + 1 * EditorGUIUtility.standardVerticalSpacing;
+        }
+    }
+}

Assets/XCharts/Editor/PropertyDrawers/BackgroundDrawer.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 24e3f8609cdf9494cb350a110566176f
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Assets/XCharts/Runtime/API/BaseChart_API.cs

@@ -727,6 +727,29 @@ namespace XCharts
             return warningInfo;
         }
 
+        /// <summary>
+        /// 是否可以开启背景组件。背景组件在chart受上层布局控制时无法开启。
+        /// </summary>
+        /// <returns></returns>
+        public bool CanShowBackgroundComponent()
+        {
+            return !m_IsControlledByLayout;
+        }
+
+        /// <summary>
+        /// 开启背景组件。背景组件在chart受上层布局控制时不适用。
+        /// </summary>
+        /// <param name="flag"></param>
+        public void EnableBackground(bool flag)
+        {
+            if (flag && !CanShowBackgroundComponent())
+            {
+                Debug.LogError("can't show background component:chart is controlled by LayoutGroup.");
+                return;
+            }
+            m_Background.show = flag;
+        }
+
         public Vector3 GetTitlePosition()
         {
             return chartPosition + m_Title.location.GetPosition(chartWidth, chartHeight);

Assets/XCharts/Runtime/Component/Main/Background.cs

@@ -0,0 +1,135 @@
+using System.Net.Mime;
+/******************************************/
+/*                                        */
+/*     Copyright (c) 2018 monitor1394     */
+/*     https://github.com/monitor1394     */
+/*                                        */
+/******************************************/
+
+using System;
+using UnityEngine;
+using UnityEngine.UI;
+
+namespace XCharts
+{
+    /// <summary>
+    /// 背景组件。
+    /// 由于框架的局限性，背景组件在chart受上层布局控制时不适用。因为背景组件节点和chart节点是同一级的。
+    /// 自动布局下的一种解决方案是，可以将chart节点再包一层parent。
+    /// 要处理这个问题底层框架要大改了，目前暂时不打算改。
+    /// 背景组件的开启需要通过接口来开启：BaseChart.EnableBackground(bool flag)
+    /// </summary>
+    [Serializable]
+    public class Background : MainComponent
+    {
+        [SerializeField] private bool m_Show = true;
+        [SerializeField] private Sprite m_Image;
+        [SerializeField] private Image.Type m_ImageType;
+        [SerializeField] private float m_Left;
+        [SerializeField] private float m_Right;
+        [SerializeField] private float m_Top;
+        [SerializeField] private float m_Bottom;
+        [SerializeField] private Color m_ImageColor = Color.white;
+        [SerializeField] private bool m_HideThemeBackgroundColor = true;
+
+        /// <summary>
+        /// 是否启用背景组件。注意背景组件在chart受上层布局控制时不适用。
+        /// </summary>
+        public bool show
+        {
+            get { return m_Show; }
+            internal set { if (PropertyUtility.SetStruct(ref m_Show, value)) SetComponentDirty(); }
+        }
+        /// <summary>
+        /// 背景图。
+        /// </summary>
+        public Sprite image
+        {
+            get { return m_Image; }
+            set { if (PropertyUtility.SetClass(ref m_Image, value)) SetComponentDirty(); }
+        }
+
+        /// <summary>
+        /// 背景图填充类型。
+        /// </summary>
+        public Image.Type imageType
+        {
+            get { return m_ImageType; }
+            set { if (PropertyUtility.SetStruct(ref m_ImageType, value)) SetComponentDirty(); }
+        }
+
+        /// <summary>
+        /// Distance between background component and the left side of the container.
+        /// background 组件离容器左侧的距离。
+        /// </summary>
+        public float left
+        {
+            get { return m_Left; }
+            set { if (PropertyUtility.SetStruct(ref m_Left, value)) SetComponentDirty(); }
+        }
+        /// <summary>
+        /// Distance between background component and the right side of the container.
+        /// background 组件离容器右侧的距离。
+        /// </summary>
+        public float right
+        {
+            get { return m_Right; }
+            set { if (PropertyUtility.SetStruct(ref m_Right, value)) SetComponentDirty(); }
+        }
+        /// <summary>
+        /// Distance between background component and the top side of the container.
+        /// background 组件离容器上侧的距离。
+        /// </summary>
+        public float top
+        {
+            get { return m_Top; }
+            set { if (PropertyUtility.SetStruct(ref m_Top, value)) SetComponentDirty(); }
+        }
+        /// <summary>
+        /// Distance between background component and the bottom side of the container.
+        /// background 组件离容器下侧的距离。
+        /// </summary>
+        public float bottom
+        {
+            get { return m_Bottom; }
+            set { if (PropertyUtility.SetStruct(ref m_Bottom, value)) SetComponentDirty(); }
+        }
+        /// <summary>
+        /// 背景图颜色。
+        /// </summary>
+        public Color imageColor
+        {
+            get { return m_ImageColor; }
+            set { if (PropertyUtility.SetColor(ref m_ImageColor, value)) SetComponentDirty(); }
+        }
+
+        /// <summary>
+        /// 当background组件开启时，是否隐藏主题中设置的背景色。
+        /// </summary>
+        public bool hideThemeBackgroundColor
+        {
+            get { return m_HideThemeBackgroundColor; }
+            set { if (PropertyUtility.SetStruct(ref m_HideThemeBackgroundColor, value)) SetVerticesDirty(); }
+        }
+
+        public static Background defaultBackground
+        {
+            get
+            {
+                var background = new Background
+                {
+                    m_Show = false,
+                    m_Image = null,
+                    m_ImageType = Image.Type.Sliced,
+                    m_Left = 0,
+                    m_Right = 0,
+                    m_Top = 0,
+                    m_Bottom = 0,
+                    m_ImageColor = Color.white,
+                    m_HideThemeBackgroundColor = true,
+                };
+                return background;
+            }
+        }
+    }
+}

Assets/XCharts/Runtime/Component/Main/Background.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 20bad62e2503e49dcacbecdc99542025
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Assets/XCharts/Runtime/Component/Main/XGrid.cs

@@ -90,7 +90,7 @@ namespace XCharts
         {
             get
             {
-                var coordinate = new Grid
+                var grid = new Grid
                 {
                     m_Show = true,
                     m_Left = 50,
@@ -98,7 +98,7 @@ namespace XCharts
                     m_Top = 50,
                     m_Bottom = 30
                 };
-                return coordinate;
+                return grid;
             }
         }
     }

Assets/XCharts/Runtime/Internal/BaseChart.cs

@@ -34,12 +34,12 @@ namespace XCharts
         IPointerEnterHandler, IPointerExitHandler, IBeginDragHandler, IPointerClickHandler,
         IDragHandler, IEndDragHandler, IScrollHandler
     {
+        protected static readonly string s_BackgroundObjectName = "background";
         protected static readonly string s_TitleObjectName = "title";
         protected static readonly string s_SubTitleObjectName = "title_sub";
         protected static readonly string s_LegendObjectName = "legend";
         protected static readonly string s_SerieLabelObjectName = "label";
         protected static readonly string s_SerieTitleObjectName = "serie";
-        protected static HideFlags s_HideFlags = HideFlags.HideAndDontSave;
 
         [SerializeField] protected string m_ChartName;
         [SerializeField] protected float m_ChartWidth;
@@ -48,10 +48,12 @@ namespace XCharts
         [SerializeField] protected float m_ChartY;
         [SerializeField] protected ThemeInfo m_ThemeInfo;
         [SerializeField] protected Title m_Title = Title.defaultTitle;
+        [SerializeField] protected Background m_Background = Background.defaultBackground;
         [SerializeField] protected Legend m_Legend = Legend.defaultLegend;
         [SerializeField] protected Tooltip m_Tooltip = Tooltip.defaultTooltip;
         [SerializeField] protected Series m_Series = Series.defaultSeries;
         [SerializeField] protected Settings m_Settings = new Settings();
+        [SerializeField] protected bool m_DebugMode = false;
 
         protected Action<VertexHelper> m_OnCustomDrawCallback;
         protected Action<BaseChart, PointerEventData> m_OnPointerClick;
@@ -79,16 +81,21 @@ namespace XCharts
         protected bool m_IsPlayingAnimation = false;
         protected List<string> m_LegendRealShowName = new List<string>();
         protected GameObject m_SerieLabelRoot;
+        protected GameObject m_BackgroundRoot;
         protected bool m_ForceOpenRaycastTarget;
+        protected bool m_IsControlledByLayout = false;
 
         protected Vector2 chartAnchorMax { get { return m_ChartMinAnchor; } }
         protected Vector2 chartAnchorMin { get { return m_ChartMaxAnchor; } }
         protected Vector2 chartPivot { get { return m_ChartPivot; } }
+        protected HideFlags chartHideFlags { get { return m_DebugMode ? HideFlags.None : HideFlags.HideInHierarchy; } }
 
         private Theme m_CheckTheme = 0;
+        private Vector3 m_LastLocalPosition;
 
         protected virtual void InitComponent()
         {
+            InitBackground();
             InitTitle();
             InitLegend();
             InitSerieLabel();
@@ -102,8 +109,13 @@ namespace XCharts
             {
                 m_ThemeInfo = ThemeInfo.Default;
             }
+            if (transform.parent != null)
+            {
+                m_IsControlledByLayout = transform.parent.GetComponent<LayoutGroup>() != null;
+            }
             raycastTarget = false;
             m_CheckTheme = m_ThemeInfo.theme;
+            m_LastLocalPosition = transform.localPosition;
             UpdateSize();
             InitComponent();
             m_Series.AnimationReset();
@@ -147,6 +159,12 @@ namespace XCharts
                 if (m_ThemeInfo.vertsDirty) RefreshChart();
                 m_ThemeInfo.ClearDirty();
             }
+            if (m_Background.anyDirty)
+            {
+                if (m_Background.componentDirty) InitBackground();
+                if (m_Background.vertsDirty) RefreshChart();
+                m_Background.ClearDirty();
+            }
             if (m_Title.anyDirty)
             {
                 if (m_Title.componentDirty) InitTitle();
@@ -215,6 +233,7 @@ namespace XCharts
         protected override void OnValidate()
         {
             m_ThemeInfo.SetAllDirty();
+            m_Background.SetAllDirty();
             m_Title.SetAllDirty();
             m_Legend.SetAllDirty();
             m_Tooltip.SetAllDirty();
@@ -231,6 +250,31 @@ namespace XCharts
             }
         }
 
+        private void InitBackground()
+        {
+            if (!m_Background.show || m_IsControlledByLayout)
+            {
+                if (m_BackgroundRoot)
+                {
+                    m_BackgroundRoot.SetActive(false);
+                }
+                return;
+            }
+            var backgroundName = s_BackgroundObjectName + GetInstanceID();
+            m_BackgroundRoot = ChartHelper.AddObject(backgroundName, transform.parent, m_ChartMinAnchor,
+                m_ChartMaxAnchor, m_ChartPivot, m_ChartSizeDelta);
+            //m_BackgroundRoot.hideFlags = chartHideFlags;
+            var backgroundImage = ChartHelper.GetOrAddComponent<Image>(m_BackgroundRoot);
+            var backgroundRect = m_BackgroundRoot.GetComponent<RectTransform>();
+            backgroundRect.position = rectTransform.position;
+            backgroundRect.SetSiblingIndex(rectTransform.GetSiblingIndex() - 1);
+
+            backgroundImage.sprite = m_Background.image;
+            backgroundImage.type = m_Background.imageType;
+            backgroundImage.color = m_Background.imageColor;
+            m_BackgroundRoot.SetActive(m_Background.show);
+        }
+
         private void InitTitle()
         {
             m_Title.OnChanged();
@@ -245,7 +289,7 @@ namespace XCharts
             var titleObject = ChartHelper.AddObject(s_TitleObjectName, transform, anchorMin, anchorMax,
                 pivot, new Vector2(chartWidth, chartHeight));
             titleObject.transform.localPosition = titlePosition;
-            titleObject.hideFlags = s_HideFlags;
+            titleObject.hideFlags = chartHideFlags;
             ChartHelper.HideAllObject(titleObject);
 
             var textFont = TitleHelper.GetTextFont(title, themeInfo);
@@ -284,7 +328,7 @@ namespace XCharts
             var legendObject = ChartHelper.AddObject(s_LegendObjectName, transform, anchorMin, anchorMax,
                 pivot, new Vector2(chartWidth, chartHeight));
             legendObject.transform.localPosition = GetLegendPosition();
-            legendObject.hideFlags = s_HideFlags;
+            legendObject.hideFlags = chartHideFlags;
             SeriesHelper.UpdateSerieNameList(m_Series, ref m_LegendRealShowName);
             List<string> datas;
             if (m_Legend.show && m_Legend.data.Count > 0)
@@ -379,7 +423,7 @@ namespace XCharts
         {
             m_SerieLabelRoot = ChartHelper.AddObject(s_SerieLabelObjectName, transform, m_ChartMinAnchor,
                 m_ChartMaxAnchor, m_ChartPivot, m_ChartSizeDelta);
-            m_SerieLabelRoot.hideFlags = s_HideFlags;
+            m_SerieLabelRoot.hideFlags = chartHideFlags;
             SerieLabelPool.ReleaseAll(m_SerieLabelRoot.transform);
             int count = 0;
             for (int i = 0; i < m_Series.Count; i++)
@@ -431,7 +475,7 @@ namespace XCharts
         {
             var titleObject = ChartHelper.AddObject(s_SerieTitleObjectName, transform, m_ChartMinAnchor,
                 m_ChartMaxAnchor, m_ChartPivot, new Vector2(chartWidth, chartHeight));
-            titleObject.hideFlags = s_HideFlags;
+            titleObject.hideFlags = chartHideFlags;
             ChartHelper.HideAllObject(titleObject);
             for (int i = 0; i < m_Series.Count; i++)
             {
@@ -465,7 +509,7 @@ namespace XCharts
             var tooltipObject = ChartHelper.AddObject("tooltip", transform, m_ChartMinAnchor,
                 m_ChartMaxAnchor, m_ChartPivot, m_ChartSizeDelta);
             tooltipObject.transform.localPosition = Vector3.zero;
-            tooltipObject.hideFlags = s_HideFlags;
+            tooltipObject.hideFlags = chartHideFlags;
             DestroyImmediate(tooltipObject.GetComponent<Image>());
             var parent = tooltipObject.transform;
             var textStyle = m_Tooltip.textStyle;
@@ -499,6 +543,11 @@ namespace XCharts
             {
                 UpdateSize();
             }
+            if (!ChartHelper.IsValueEqualsVector3(m_LastLocalPosition, transform.localPosition))
+            {
+                m_LastLocalPosition = transform.localPosition;
+                OnLocalPositionChanged();
+            }
         }
 
         private void UpdateSize()
@@ -653,13 +702,20 @@ namespace XCharts
 
         protected virtual void OnSizeChanged()
         {
+            m_Background.SetAllDirty();
             m_Title.SetAllDirty();
             m_Legend.SetAllDirty();
             m_Tooltip.SetAllDirty();
             m_Series.SetLabelDirty();
+            m_ReinitLabel = true;
             RefreshChart();
         }
 
+        protected virtual void OnLocalPositionChanged()
+        {
+            m_Background.SetAllDirty();
+        }
+
         protected virtual void OnThemeChanged()
         {
         }
@@ -723,13 +779,14 @@ namespace XCharts
             Vector3 p2 = new Vector3(chartX + chartWidth, chartY + chartHeight);
             Vector3 p3 = new Vector3(chartX + chartWidth, chartY);
             Vector3 p4 = new Vector3(chartX, chartY);
-            ChartDrawer.DrawPolygon(vh, p1, p2, p3, p4, m_ThemeInfo.backgroundColor);
+            var backgroundColor = ThemeHelper.GetBackgroundColor(m_ThemeInfo, m_Background, m_IsControlledByLayout);
+            ChartDrawer.DrawPolygon(vh, p1, p2, p3, p4, backgroundColor);
         }
 
         public void DrawSymbol(VertexHelper vh, SerieSymbolType type, float symbolSize,
           float tickness, Vector3 pos, Color color, Color toColor, float gap, float[] cornerRadius)
         {
-            var backgroundColor = m_ThemeInfo.backgroundColor;
+            var backgroundColor = ThemeHelper.GetBackgroundColor(m_ThemeInfo, m_Background, m_IsControlledByLayout);
             var smoothness = m_Settings.cicleSmoothness;
             ChartDrawer.DrawSymbol(vh, type, symbolSize, tickness, pos, color, toColor, gap,
                 cornerRadius, backgroundColor, smoothness);

Assets/XCharts/Runtime/Internal/CoordinateChart.cs

@@ -156,7 +156,8 @@ namespace XCharts
                 var cp2 = new Vector3(m_CoordinateX - yLineDiff, cpty);
                 var cp3 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, cpty);
                 var cp4 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, m_CoordinateY - xLineDiff);
-                ChartDrawer.DrawPolygon(vh, cp1, cp2, cp3, cp4, m_ThemeInfo.backgroundColor);
+                var backgroundColor = ThemeHelper.GetBackgroundColor(m_ThemeInfo, m_Background, m_IsControlledByLayout);
+                ChartDrawer.DrawPolygon(vh, cp1, cp2, cp3, cp4, backgroundColor);
 
             }
             else
@@ -172,26 +173,27 @@ namespace XCharts
             var yLineDiff = yAxis0.axisLine.width;
             var xSplitDiff = xAxis0.splitLine.lineStyle.width;
             var ySplitDiff = yAxis0.splitLine.lineStyle.width;
+            var backgroundColor = ThemeHelper.GetBackgroundColor(m_ThemeInfo, m_Background, m_IsControlledByLayout);
             var lp1 = new Vector3(m_ChartX, m_ChartY);
             var lp2 = new Vector3(m_ChartX, m_ChartY + chartHeight);
             var lp3 = new Vector3(m_CoordinateX - yLineDiff, m_ChartY + chartHeight);
             var lp4 = new Vector3(m_CoordinateX - yLineDiff, m_ChartY);
-            ChartDrawer.DrawPolygon(vh, lp1, lp2, lp3, lp4, m_ThemeInfo.backgroundColor);
+            ChartDrawer.DrawPolygon(vh, lp1, lp2, lp3, lp4, backgroundColor);
             var rp1 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, m_ChartY);
             var rp2 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, m_ChartY + chartHeight);
             var rp3 = new Vector3(m_ChartX + chartWidth, m_ChartY + chartHeight);
             var rp4 = new Vector3(m_ChartX + chartWidth, m_ChartY);
-            ChartDrawer.DrawPolygon(vh, rp1, rp2, rp3, rp4, m_ThemeInfo.backgroundColor);
+            ChartDrawer.DrawPolygon(vh, rp1, rp2, rp3, rp4, backgroundColor);
             var up1 = new Vector3(m_CoordinateX - yLineDiff, m_CoordinateY + m_CoordinateHeight + ySplitDiff);
             var up2 = new Vector3(m_CoordinateX - yLineDiff, m_ChartY + chartHeight);
             var up3 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, m_ChartY + chartHeight);
             var up4 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, m_CoordinateY + m_CoordinateHeight + ySplitDiff);
-            ChartDrawer.DrawPolygon(vh, up1, up2, up3, up4, m_ThemeInfo.backgroundColor);
+            ChartDrawer.DrawPolygon(vh, up1, up2, up3, up4, backgroundColor);
             var dp1 = new Vector3(m_CoordinateX - yLineDiff, m_ChartY);
             var dp2 = new Vector3(m_CoordinateX - yLineDiff, m_CoordinateY - xLineDiff);
             var dp3 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, m_CoordinateY - xLineDiff);
             var dp4 = new Vector3(m_CoordinateX + m_CoordinateWidth + xSplitDiff, m_ChartY);
-            ChartDrawer.DrawPolygon(vh, dp1, dp2, dp3, dp4, m_ThemeInfo.backgroundColor);
+            ChartDrawer.DrawPolygon(vh, dp1, dp2, dp3, dp4, backgroundColor);
         }
 
         protected virtual void DrawSerie(VertexHelper vh)
@@ -515,7 +517,7 @@ namespace XCharts
                 chartAnchorMax, chartPivot, new Vector2(chartWidth, chartHeight));
             axisObj.transform.localPosition = Vector3.zero;
             axisObj.SetActive(yAxis.show && yAxis.axisLabel.show);
-            axisObj.hideFlags = s_HideFlags;
+            axisObj.hideFlags = chartHideFlags;
             ChartHelper.HideAllObject(axisObj);
             var labelColor = ChartHelper.IsClearColor(yAxis.axisLabel.color) ?
                 (Color)m_ThemeInfo.axisTextColor :
@@ -621,7 +623,7 @@ namespace XCharts
                 chartAnchorMax, chartPivot, new Vector2(chartWidth, chartHeight));
             axisObj.transform.localPosition = Vector3.zero;
             axisObj.SetActive(xAxis.show && xAxis.axisLabel.show);
-            axisObj.hideFlags = s_HideFlags;
+            axisObj.hideFlags = chartHideFlags;
             ChartHelper.HideAllObject(axisObj);
             var labelColor = ChartHelper.IsClearColor(xAxis.axisLabel.color) ?
                 (Color)m_ThemeInfo.axisTextColor :
@@ -703,7 +705,7 @@ namespace XCharts
             var dataZoomObject = ChartHelper.AddObject(s_DefaultDataZoom, transform, chartAnchorMin,
                 chartAnchorMax, chartPivot, new Vector2(chartWidth, chartHeight));
             dataZoomObject.transform.localPosition = Vector3.zero;
-            dataZoomObject.hideFlags = s_HideFlags;
+            dataZoomObject.hideFlags = chartHideFlags;
             ChartHelper.HideAllObject(dataZoomObject);
             var startLabel = ChartHelper.AddTextObject(s_DefaultDataZoom + "start",
                 dataZoomObject.transform, m_ThemeInfo.font, m_ThemeInfo.dataZoomTextColor, TextAnchor.MiddleRight,

Assets/XCharts/Runtime/Internal/Helper/ThemeHelper.cs

@@ -0,0 +1,20 @@
+/******************************************/
+/*                                        */
+/*     Copyright (c) 2018 monitor1394     */
+/*     https://github.com/monitor1394     */
+/*                                        */
+/******************************************/
+
+using UnityEngine;
+
+namespace XCharts
+{
+    internal static class ThemeHelper
+    {
+        public static Color GetBackgroundColor(ThemeInfo themeInfo, Background background, bool m_IsControlledByLayout)
+        {
+            if (!m_IsControlledByLayout && background.show && background.hideThemeBackgroundColor) return Color.clear;
+            else return themeInfo.backgroundColor;
+        }
+    }
+}

Assets/XCharts/Runtime/Internal/Helper/ThemeHelper.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 5093880c2dbba4c01bb0231653ed3252
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: