增加Serie的barType参数，可配置斑马柱状图

2026-05-22 08:41:39 +00:00 · 2019-10-18 07:41:23 +08:00
parent 7c7f21fd27
commit c1ec8be133
7 changed files with 26055 additions and 21338 deletions
--- a/Assets/XCharts/Demo/demo_xchart.unity
+++ b/Assets/XCharts/Demo/demo_xchart.unity
--- a/Assets/XCharts/Scripts/Editor/PropertyDrawers/SerieDrawer.cs
+++ b/Assets/XCharts/Scripts/Editor/PropertyDrawers/SerieDrawer.cs
@@ -37,6 +37,8 @@ namespace XCharts
            SerializedProperty m_BarPercentStack = prop.FindPropertyRelative("m_BarPercentStack");
            SerializedProperty m_BarWidth = prop.FindPropertyRelative("m_BarWidth");
            SerializedProperty m_BarGap = prop.FindPropertyRelative("m_BarGap");
+            SerializedProperty m_BarZebraWidth = prop.FindPropertyRelative("m_BarZebraWidth");
+            SerializedProperty m_BarZebraGap = prop.FindPropertyRelative("m_BarZebraGap");
            SerializedProperty m_AreaStyle = prop.FindPropertyRelative("m_AreaStyle");
            SerializedProperty m_Symbol = prop.FindPropertyRelative("m_Symbol");
            SerializedProperty m_RoseType = prop.FindPropertyRelative("m_RoseType");
@@ -124,6 +126,10 @@ namespace XCharts
                    drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
                    EditorGUI.PropertyField(drawRect, m_BarGap);
                    drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                    EditorGUI.PropertyField(drawRect, m_BarZebraWidth);
+                    drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                    EditorGUI.PropertyField(drawRect, m_BarZebraGap);
+                    drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
                }
                if (serieType == SerieType.Pie)
                {
@@ -132,8 +138,8 @@ namespace XCharts
                    EditorGUI.PropertyField(drawRect, m_Space);
                    drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;

-                    ChartEditorHelper.MakeTwoField(ref drawRect,pos.width,m_Center,"Center");
-                    ChartEditorHelper.MakeTwoField(ref drawRect,pos.width,m_Radius,"Radius");
+                    ChartEditorHelper.MakeTwoField(ref drawRect, pos.width, m_Center, "Center");
+                    ChartEditorHelper.MakeTwoField(ref drawRect, pos.width, m_Radius, "Radius");
                }

                EditorGUI.PropertyField(drawRect, m_LineStyle);
@@ -356,7 +362,7 @@ namespace XCharts
                }
                if (serieType == SerieType.Bar)
                {
-                    height += 4 * EditorGUIUtility.singleLineHeight + 3 * EditorGUIUtility.standardVerticalSpacing;
+                    height += 6 * EditorGUIUtility.singleLineHeight + 5 * EditorGUIUtility.standardVerticalSpacing;
                }
                if (m_DataFoldout[index])
                {
--- a/Assets/XCharts/Scripts/UI/Component/Main/Serie.cs
+++ b/Assets/XCharts/Scripts/UI/Component/Main/Serie.cs
@@ -129,7 +129,7 @@ namespace XCharts
        /// <summary>
        /// 斑马柱形图
        /// </summary>
-        ZebraLine,
+        Zebra,
        /// <summary>
        /// 胶囊柱形图
        /// </summary>
@@ -193,6 +193,9 @@ namespace XCharts
        [SerializeField] private float m_BarWidth = 0.6f;
        [SerializeField] private float m_BarGap = 0.3f; // 30%
        [SerializeField] private float m_BarCategoryGap = 0.2f; // 20%
+        [SerializeField] private float m_BarZebraWidth = 4f;
+        [SerializeField] private float m_BarZebraGap = 2f;
+

        [SerializeField] private bool m_ClickOffset = true;
        [SerializeField] private RoseType m_RoseType = RoseType.None;
@@ -320,7 +323,7 @@ namespace XCharts
        /// </summary>
        public BarType barType { get { return m_BarType; } set { m_BarType = value; } }
        /// <summary>
-        /// 柱形图是否为百分比堆积。
+        /// 柱形图是否为百分比堆积。相同stack的serie只要有一个barPercentStack为true，则就显示成百分比堆叠柱状图。
        /// </summary>
        public bool barPercentStack { get { return m_BarPercentStack; } set { m_BarPercentStack = value; } }
        /// <summary>
@@ -349,6 +352,15 @@ namespace XCharts
        /// 在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
        /// </summary>
        public float barCategoryGap { get { return m_BarCategoryGap; } set { m_BarCategoryGap = value; } }
+        /// <summary>
+        /// 斑马线的粗细。
+        /// </summary>
+        public float barZebraWidth { get { return m_BarZebraWidth; } set { m_BarZebraWidth = value; } }
+        /// <summary>
+        /// 斑马线的间距。
+        /// </summary>
+        public float barZebraGap { get { return m_BarZebraGap; } set { m_BarZebraGap = value; } }
+
        /// <summary>
        /// Whether offset when mouse click pie chart item.
        /// 鼠标点击时是否开启偏移，一般用在PieChart图表中。
--- a/Assets/XCharts/Scripts/UI/Internal/CoordinateChart_DrawBar.cs
+++ b/Assets/XCharts/Scripts/UI/Internal/CoordinateChart_DrawBar.cs
@@ -52,7 +52,7 @@ namespace XCharts
                if (isPercentStack)
                {
                    valueTotal = GetSameStackTotalValue(serie.stack, i);
-                    barHig =  value / valueTotal * coordinateWidth;
+                    barHig = value / valueTotal * coordinateWidth;
                    seriesHig[i] += barHig;
                }
                else
@@ -77,7 +77,16 @@ namespace XCharts
                {
                    Color areaColor = serie.GetAreaColor(m_ThemeInfo, colorIndex, highlight);
                    Color areaToColor = serie.GetAreaToColor(m_ThemeInfo, colorIndex, highlight);
-                    ChartDrawer.DrawPolygon(vh, p4, p1, p2, p3, areaColor, areaToColor);
+                    if (serie.barType == BarType.Zebra)
+                    {
+                        p1 = (p4 + p1) / 2;
+                        p2 = (p2 + p3) / 2;
+                        ChartDrawer.DrawZebraLine(vh, p1, p2, barWidth / 2, serie.barZebraWidth, serie.barZebraGap, areaColor);
+                    }
+                    else
+                    {
+                        ChartDrawer.DrawPolygon(vh, p4, p1, p2, p3, areaColor, areaToColor);
+                    }
                }
            }
            if (!m_Series.IsStack(serie.stack, SerieType.Bar))
@@ -151,7 +160,7 @@ namespace XCharts
                if (isPercentStack)
                {
                    valueTotal = GetSameStackTotalValue(serie.stack, i);
-                    barHig =  value / valueTotal * coordinateHeight;
+                    barHig = value / valueTotal * coordinateHeight;
                    seriesHig[i] += barHig;
                }
                else
@@ -177,7 +186,16 @@ namespace XCharts
                {
                    Color areaColor = serie.GetAreaColor(m_ThemeInfo, colorIndex, highlight);
                    Color areaToColor = serie.GetAreaToColor(m_ThemeInfo, colorIndex, highlight);
-                    ChartDrawer.DrawPolygon(vh, p4, p1, p2, p3, areaColor, areaToColor);
+                    if (serie.barType == BarType.Zebra)
+                    {
+                        p1 = (p4 + p1) / 2;
+                        p2 = (p2 + p3) / 2;
+                        ChartDrawer.DrawZebraLine(vh, p1, p2, barWidth / 2, serie.barZebraWidth, serie.barZebraGap, areaColor);
+                    }
+                    else
+                    {
+                        ChartDrawer.DrawPolygon(vh, p4, p1, p2, p3, areaColor, areaToColor);
+                    }
                }
            }
            if (!m_Series.IsStack(serie.stack, SerieType.Bar))
--- a/Assets/XCharts/Scripts/UI/Utility/ChartDrawer.cs
+++ b/Assets/XCharts/Scripts/UI/Utility/ChartDrawer.cs
@@ -139,6 +139,12 @@ namespace XCharts
            DrawLine(vh, sp, p2, size, color);
        }

+        public static void DrawZebraLine(VertexHelper vh, Vector3 p1, Vector3 p2, float size,
+            float zebraWidth, float zebraGap, Color32 color)
+        {
+            DrawDotLine(vh, p1, p2, size, color, zebraWidth, zebraGap);
+        }
+
        public static void DrawPolygon(VertexHelper vh, Vector3 p, float radius, Color32 color,
            bool vertical = true)
        {
--- a/Doc/XCharts配置项手册.md
+++ b/Doc/XCharts配置项手册.md
@@ -352,12 +352,14 @@
 * `lineStyle`：线条样式 [LineStyle](#LineStyle)。
 * `barType`：柱状图类型。以下几种类型：
  * `Normal`：普通柱状图。
-  * `ZebraLine`：斑马柱状图。
+  * `Zebra`：斑马柱状图。
  * `Capsule`：胶囊柱状图。
 * `barPercentStack`：是否百分比堆叠柱状图，相同 `stack` 的 `serie` 只要有一个 `barPercentStack` 为 `true`，则就显示成百分比堆叠柱状图。
 * `barWidth`：柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
 * `barGap`：不同系列的柱间距离。为百分比（如 `'0.3f'`，表示柱子宽度的 `30%`）。如果想要两个系列的柱子重叠，可以设置 `barGap` 为 `'-1f'`。这在用柱子做背景的时候有用。在同一坐标系上，此属性会被多个 `'bar'` 系列共享。此属性应设置于此坐标系中最后一个 `'bar'` 系列上才会生效，并且是对此坐标系中所有 `'bar'` 系列生效。
 * `barCategoryGap`：同一系列的柱间距离，默认为类目间距的20%，可设固定值。在同一坐标系上，此属性会被多个 `'bar'` 系列共享。此属性应设置于此坐标系中最后一个 `'bar'` 系列上才会生效，并且是对此坐标系中所有 `'bar'` 系列生效。
+* `barZebraWidth`：斑马线的粗细。`barType` 为 `Zebra` 时有效。
+* `barZebraGap`：斑马线的间距。`barType` 为 `Zebra` 时有效。
 * `pieClickOffset`：鼠标点击时是否开启偏移，一般用在PieChart图表中。
 * `pieRoseType`：是否展示成南丁格尔图，通过半径区分数据大小。
 * `pieSpace`：饼图项间的空隙留白。
--- a/README.md
+++ b/README.md
@@ -28,7 +28,8 @@ QQ交流群：XCharts交流群（202030963）

 ## 更新日志

-* （2019.10.16）增加`Serie`的`barPercentStack`参数，可配置`百分比堆叠柱状图`
+* （2019.10.18）增加`Serie`的`barType`参数，可配置`斑马柱状图`
+* （2019.10.18）增加`Serie`的`barPercentStack`参数，可配置`百分比堆叠柱状图`
 * （2019.10.16）增加`Demo`首页`LineChart`的代码动态控制效果
 * （2019.10.15）移除`Pie`组件，相关参数放到`Settings`中配置
 * （2019.10.15）增加`Demo`首页，展示代码动态控制效果
@@ -163,13 +164,12 @@ QQ交流群：XCharts交流群（202030963）
  1. 基础柱状图
  2. 负数数值轴+自定义最大最小刻度
  3. XY轴互换
-  4. 坐标轴刻度与标签对齐
-  5. 世界人口总量
-  6. 堆叠条形图
-  7. 深圳月最低生活费组成（单位:元）
-  8. 非堆叠同柱
-  9. 5000数据
-  10. 单条堆叠柱状图
+  4. 世界人口总量
+  5. 堆叠同柱
+  6. 非堆叠同柱
+  7. 单条百分比堆叠柱状图
+  8. 多条百分比堆叠柱状图
+  9. 斑马柱状图

 ### 饼图