增加LineStyle的toColor和toColor2设置LineChart的水平渐变，取消通过ItemStyle设置LineChart的水平渐变。

CHANGELOG-EN.md

@@ -1,6 +1,7 @@
 
 # 更新日志
 
+* (2020.08.29) Added `toColor` and `toColor2` of `LineStyle` to set the horizontal gradient of `LineChart`. Cancel `ItemStyle` to set the horizontal gradient of `LineChart`.
 * (2020.08.29) Added the `onPointerClickPie` of `PieChart`, a callback function of click pie area.
 * (2020.08.29) Added the `onPointerClickBar` of `BarChart`, a callback function of click bar.
 * (2020.08.24) Release `V1.6.0` version

CHANGELOG.md

@@ -1,6 +1,7 @@
 
 # 更新日志
 
+* (2020.08.29) 增加`LineStyle`的`toColor`和`toColor2`设置`LineChart`的水平渐变，取消通过`ItemStyle`设置`LineChart`的水平渐变。
 * (2020.08.29) 增加`PieChart`的`onPointerClickPie`点击扇形图扇区回调
 * (2020.08.29) 增加`BarChart`的`onPointerClickBar`点击柱形图柱条回调
 * (2020.08.24) 发布`v1.6.0`版本

Documentation/XCharts配置项手册.md

@@ -868,6 +868,8 @@
   * `DashDot`：点划线。
   * `DashDotDot`：双点划线。
 * `color`：线条颜色。默认和 `serie` 一致。
+* `toColor`：线的渐变颜色（需要水平方向渐变时）。
+* `toColor2`：线的渐变颜色2（需要水平方向三个渐变色的渐变时）。
 * `width`：线条宽。
 * `opacity`：线条的透明度。支持从 `0` 到 `1` 的数字，为 `0` 时不绘制该图形。
 

Documentation/xcharts-configuration-EN.md

@@ -761,6 +761,8 @@ Line chart serie.
   * `DashDot`: 点划线。
   * `DashDotDot`: 双点划线。
 * `color`: 线条颜色。默认和 `serie` 一致。
+* `toColor`：线的渐变颜色（需要水平方向渐变时）。
+* `toColor2`：线的渐变颜色2（需要水平方向三个渐变色的渐变时）。
 * `width`: 线条宽。
 * `opacity`: 线条的透明度。支持从 `0` 到 `1` 的数字，为 `0` 时不绘制该图形。
 

Editor/PropertyDrawers/LineStyleDrawer.cs

@@ -23,6 +23,8 @@ namespace XCharts
             SerializedProperty show = prop.FindPropertyRelative("m_Show");
             SerializedProperty m_Type = prop.FindPropertyRelative("m_Type");
             SerializedProperty m_Color = prop.FindPropertyRelative("m_Color");
+            SerializedProperty m_ToColor = prop.FindPropertyRelative("m_ToColor");
+            SerializedProperty m_ToColor2 = prop.FindPropertyRelative("m_ToColor2");
             SerializedProperty m_Width = prop.FindPropertyRelative("m_Width");
             SerializedProperty m_Opacity = prop.FindPropertyRelative("m_Opacity");
             ChartEditorHelper.MakeFoldout(ref drawRect, ref m_LineStyleToggle, prop, "Line Style", show, false);
@@ -34,6 +36,10 @@ namespace XCharts
                 drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
                 EditorGUI.PropertyField(drawRect, m_Color);
                 drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                EditorGUI.PropertyField(drawRect, m_ToColor);
+                drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
+                EditorGUI.PropertyField(drawRect, m_ToColor2);
+                drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
                 EditorGUI.PropertyField(drawRect, m_Width);
                 drawRect.y += EditorGUIUtility.singleLineHeight + EditorGUIUtility.standardVerticalSpacing;
                 EditorGUI.PropertyField(drawRect, m_Opacity);
@@ -47,7 +53,7 @@ namespace XCharts
             float height = 0;
             if (ChartEditorHelper.IsToggle(m_LineStyleToggle, prop))
             {
-                height += 5 * EditorGUIUtility.singleLineHeight + 4 * EditorGUIUtility.standardVerticalSpacing;
+                height += 7 * EditorGUIUtility.singleLineHeight + 6 * EditorGUIUtility.standardVerticalSpacing;
             }
             else
             {

Runtime/Component/Sub/ItemStyle.cs

@@ -236,15 +236,21 @@ namespace XCharts
             if (!IsNeedGradient()) return ChartConst.clearColor32;
             value = Mathf.Clamp01(value);
             var startColor = ChartHelper.IsClearColor(m_Color) ? defaultColor : m_Color;
+            Color32 color;
             if (!ChartHelper.IsClearColor(m_ToColor2))
             {
-                if (value <= 0.5f) return Color32.Lerp(startColor, m_ToColor, 2 * value);
+                if (value <= 0.5f) color = Color32.Lerp(startColor, m_ToColor, 2 * value);
-                else return Color32.Lerp(m_ToColor, m_ToColor2, 2 * (value - 0.5f));
+                else color = Color32.Lerp(m_ToColor, m_ToColor2, 2 * (value - 0.5f));
             }
             else
             {
-                return Color32.Lerp(startColor, m_ToColor, value);
+                color = Color32.Lerp(startColor, m_ToColor, value);
             }
+            if (m_Opacity != 1)
+            {
+                color.a = (byte)(color.a * m_Opacity);
+            }
+            return color;
         }
     }
 }

Runtime/Component/Sub/LineStyle.cs

@@ -13,7 +13,8 @@ namespace XCharts
     /// <summary>
     /// The style of line.
     /// 线条样式。
-    /// 注： 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color，线条颜色默认也会取改颜色。
+    /// 注： 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color，线条颜色默认也会取该颜色。
+    /// toColor，toColor2可设置水平方向的渐变，如需要设置垂直方向的渐变，可使用VisualMap。
     /// </summary>
     [System.Serializable]
     public class LineStyle : SubComponent
@@ -47,6 +48,8 @@ namespace XCharts
         [SerializeField] private bool m_Show = true;
         [SerializeField] private Type m_Type = Type.Solid;
         [SerializeField] private Color32 m_Color;
+        [SerializeField] private Color32 m_ToColor;
+        [SerializeField] private Color32 m_ToColor2;
         [SerializeField] private float m_Width = 0.8f;
         [SerializeField] [Range(0, 1)] private float m_Opacity = 1;
 
@@ -78,6 +81,24 @@ namespace XCharts
             set { if (PropertyUtility.SetColor(ref m_Color, value)) SetVerticesDirty(); }
         }
         /// <summary>
+        /// the middle color of line, default use serie color.
+        /// 线的渐变颜色（需要水平方向渐变时）。
+        /// </summary>
+        public Color32 toColor
+        {
+            get { return m_ToColor; }
+            set { if (PropertyUtility.SetColor(ref m_ToColor, value)) SetVerticesDirty(); }
+        }
+        /// <summary>
+        /// the end color of line, default use serie color.
+        /// 线的渐变颜色2（需要水平方向三个渐变色的渐变时）。
+        /// </summary>
+        public Color32 toColor2
+        {
+            get { return m_ToColor2; }
+            set { if (PropertyUtility.SetColor(ref m_ToColor2, value)) SetVerticesDirty(); }
+        }
+        /// <summary>
         /// the width of line.
         /// 线宽。
         /// /// </summary>
@@ -117,6 +138,8 @@ namespace XCharts
             lineStyle.show = show;
             lineStyle.type = type;
             lineStyle.color = color;
+            lineStyle.toColor = toColor;
+            lineStyle.toColor2 = toColor2;
             lineStyle.width = width;
             lineStyle.opacity = opacity;
             return lineStyle;
@@ -127,6 +150,8 @@ namespace XCharts
             show = lineStyle.show;
             type = lineStyle.type;
             color = lineStyle.color;
+            toColor = lineStyle.toColor;
+            toColor2 = lineStyle.toColor2;
             width = lineStyle.width;
             opacity = lineStyle.opacity;
         }
@@ -138,5 +163,32 @@ namespace XCharts
             color.a *= (byte)(color.a * m_Opacity);
             return color;
         }
+
+        public bool IsNeedGradient()
+        {
+            return !ChartHelper.IsClearColor(m_ToColor) || !ChartHelper.IsClearColor(m_ToColor2);
+        }
+
+        public Color32 GetGradientColor(float value, Color32 defaultColor)
+        {
+            var color = ChartConst.clearColor32;
+            if (!IsNeedGradient()) return color;
+            value = Mathf.Clamp01(value);
+            var startColor = ChartHelper.IsClearColor(m_Color) ? defaultColor : m_Color;
+            if (!ChartHelper.IsClearColor(m_ToColor2))
+            {
+                if (value <= 0.5f) color = Color32.Lerp(startColor, m_ToColor, 2 * value);
+                else color = Color32.Lerp(m_ToColor, m_ToColor2, 2 * (value - 0.5f));
+            }
+            else
+            {
+                color = Color32.Lerp(startColor, m_ToColor, value);
+            }
+            if (m_Opacity != 1)
+            {
+                color.a *= (byte)(color.a * m_Opacity);
+            }
+            return color;
+        }
     }
 }

Runtime/Internal/CoordinateChart_DrawLine.cs

@@ -724,7 +724,7 @@ namespace XCharts
                 if (serie.animation.CheckDetailBreak(cp, isYAxis)) isBreak = true;
                 var tp1 = cp - dir1v * serie.lineStyle.width;
                 var tp2 = cp + dir1v * serie.lineStyle.width;
-                CheckLineGradientColor(cp, serie.itemStyle, axis, defaultLineColor, ref lineColor);
+                CheckLineGradientColor(cp, serie.lineStyle, axis, defaultLineColor, ref lineColor);
                 if (isDown)
                 {
                     if (!isBreak)
@@ -1055,12 +1055,12 @@ namespace XCharts
             return false;
         }
 
-        private void CheckLineGradientColor(Vector3 cp, ItemStyle itemStyle, Axis axis, Color32 defaultLineColor, ref Color32 lineColor)
+        private void CheckLineGradientColor(Vector3 cp, LineStyle lineStyle, Axis axis, Color32 defaultLineColor, ref Color32 lineColor)
         {
             if (VisualMapHelper.IsNeedGradient(m_VisualMap))
                 lineColor = VisualMapHelper.GetLineGradientColor(m_VisualMap, cp, this, axis, defaultLineColor);
-            else if (itemStyle.IsNeedGradient())
+            else if (lineStyle.IsNeedGradient())
-                lineColor = VisualMapHelper.GetItemStyleGradientColor(itemStyle, cp, this, axis, defaultLineColor);
+                lineColor = VisualMapHelper.GetLineStyleGradientColor(lineStyle, cp, this, axis, defaultLineColor);
         }
 
         private bool IsInRightOrUp(bool isYAxis, Vector3 lp, Vector3 rp)
@@ -1185,7 +1185,7 @@ namespace XCharts
                 {
                     start = bezierPoints[i];
                     to = bezierPoints[i + 1];
-                    CheckLineGradientColor(start, serie.itemStyle, xAxis, defaultLineColor, ref lineColor);
+                    CheckLineGradientColor(start, serie.lineStyle, xAxis, defaultLineColor, ref lineColor);
                     CheckClipAndDrawLine(vh, start, to, lineWidth, lineColor, serie.clip);
                 }
                 return true;
@@ -1208,7 +1208,7 @@ namespace XCharts
                 {
                     if (!serie.animation.IsInFadeOut())
                     {
-                        CheckLineGradientColor(lp, serie.itemStyle, xAxis, defaultLineColor, ref lineColor);
+                        CheckLineGradientColor(lp, serie.lineStyle, xAxis, defaultLineColor, ref lineColor);
                         CheckClipAndDrawTriangle(vh, smoothStartPosUp, startUp, lp, lineColor, serie.clip);
                         CheckClipAndDrawTriangle(vh, smoothStartPosDn, startDn, lp, lineColor, serie.clip);
                         TryAddToList(isTurnBack, isYAxis, smoothPoints, lastSmoothPoint, smoothStartPosUp, false);
@@ -1237,7 +1237,7 @@ namespace XCharts
                 diff = dir1v * lineWidth;
                 toUp = to - diff;
                 toDn = to + diff;
-                CheckLineGradientColor(to, serie.itemStyle, xAxis, defaultLineColor, ref lineColor);
+                CheckLineGradientColor(to, serie.lineStyle, xAxis, defaultLineColor, ref lineColor);
                 if (isYAxis) CheckClipAndDrawPolygon(vh, startDn, toDn, toUp, startUp, lineColor, serie.clip);
                 else CheckClipAndDrawPolygon(vh, startUp, toUp, toDn, startDn, lineColor, serie.clip);
                 TryAddToList(isTurnBack, isYAxis, smoothPoints, lastSmoothPoint, toUp, true);

Runtime/Internal/Helper/VisualMapHelper.cs

@@ -114,6 +114,17 @@ namespace XCharts
             else return color;
         }
 
+        internal static Color32 GetLineStyleGradientColor(LineStyle lineStyle, Vector3 pos, CoordinateChart chart, Axis axis, Color32 defaultColor)
+        {
+            var min = axis.runtimeMinValue;
+            var max = axis.runtimeMaxValue;
+            var value = min + (pos.x - chart.coordinateX) / chart.coordinateWidth * (max - min);
+            var rate = (value - min) / (max - min);
+            var color = lineStyle.GetGradientColor(rate, defaultColor);
+            if (ChartHelper.IsClearColor(color)) return defaultColor;
+            else return color;
+        }
+
         public static bool IsNeedGradient(VisualMap visualMap)
         {
             if (!visualMap.enable || visualMap.inRange.Count <= 0) return false;