diff --git a/Assets/XCharts/Demo/Scripts/Demo10_LineSimple.cs b/Assets/XCharts/Demo/Scripts/Demo10_LineSimple.cs index 81c8ecf0..e26e4783 100644 --- a/Assets/XCharts/Demo/Scripts/Demo10_LineSimple.cs +++ b/Assets/XCharts/Demo/Scripts/Demo10_LineSimple.cs @@ -5,12 +5,13 @@ using XCharts; [ExecuteInEditMode] public class Demo10_LineSimple : MonoBehaviour { - //void Awake() - void Start() + void Awake() { var chart = gameObject.GetComponent(); - if (chart == null) return; - + if (chart == null) + { + chart = gameObject.AddComponent(); + } chart.title.show = true; chart.title.text = "Line Simple"; @@ -21,17 +22,15 @@ public class Demo10_LineSimple : MonoBehaviour chart.xAxises[1].show = false; chart.yAxises[0].show = true; chart.yAxises[1].show = false; - chart.xAxises[0].type = Axis.AxisType.Category; chart.yAxises[0].type = Axis.AxisType.Value; - int dataCount = 10; - chart.xAxises[0].splitNumber = dataCount; + chart.xAxises[0].splitNumber = 10; chart.xAxises[0].boundaryGap = true; chart.RemoveData(); chart.AddSerie(SerieType.Line); - for (int i = 0; i < dataCount; i++) + for (int i = 0; i < 10; i++) { chart.AddXAxisData("x" + i); chart.AddData(0, Random.Range(10, 20)); diff --git a/Assets/XCharts/Scripts/UI/Component/Grid.cs b/Assets/XCharts/Scripts/UI/Component/Grid.cs index 1044520c..4f38901a 100644 --- a/Assets/XCharts/Scripts/UI/Component/Grid.cs +++ b/Assets/XCharts/Scripts/UI/Component/Grid.cs @@ -17,7 +17,7 @@ namespace XCharts [Serializable] public class Grid : IEquatable { - [SerializeField] private bool m_Show; + [SerializeField] private bool m_Show = true; [SerializeField] private float m_Left; [SerializeField] private float m_Right; [SerializeField] private float m_Top; diff --git a/Doc/screenshot/inpsector-desc.png b/Doc/screenshot/inpsector-desc.png new file mode 100644 index 00000000..48a8b84e Binary files /dev/null and b/Doc/screenshot/inpsector-desc.png differ diff --git a/Doc/screenshot/linechart-simple.png b/Doc/screenshot/linechart-simple.png new file mode 100644 index 00000000..91a0a918 Binary files /dev/null and b/Doc/screenshot/linechart-simple.png differ diff --git a/Doc/screenshot/linechart.png b/Doc/screenshot/linechart.png new file mode 100644 index 00000000..db04158f Binary files /dev/null and b/Doc/screenshot/linechart.png differ diff --git a/Doc/教程：5分钟上手XCharts.md b/Doc/教程：5分钟上手XCharts.md index 12b333ed..e4f95992 100644 --- a/Doc/教程：5分钟上手XCharts.md +++ b/Doc/教程：5分钟上手XCharts.md @@ -10,16 +10,89 @@ 你可以通过以下两种方式获取 `XCharts` 。 -1. 如果你只是想运行 `Demo` 查看效果，可以在 [Github](https://github.com/monitor1394/unity-ugui-XCharts)上的 [Clone or download](https://github.com/monitor1394/unity-ugui-XCharts/archive/master.zip)下载最新版本或去 [release](https://github.com/monitor1394/unity-ugui-XCharts/releases)下载稳定版本，将源码工程解压后用`unity`打开即可。 -2. 如果你要将 `XCharts` 加入你的项目中，可以在[Github](https://github.com/monitor1394/unity-ugui-XCharts)上下载最新的 [release](https://github.com/monitor1394/unity-ugui-XCharts/releases)稳定版本，将 `XCharts-vx.x.x.unitypackage` 通过 Unity 导入到你的项目中，或下载 Source code 解压后将内部的 `XCharts` 文件夹拷贝到你项目的 `Assets` 目录下。 +如果你只是想运行 `Demo` 查看效果，可以在 [Github](https://github.com/monitor1394/unity-ugui-XCharts)上的 [Clone or download](https://github.com/monitor1394/unity-ugui-XCharts/archive/master.zip)下载最新版本或去 [release](https://github.com/monitor1394/unity-ugui-XCharts/releases)下载稳定版本，将源码工程解压后用`unity`打开即可。 -## 绘制一个简单的图表 + 如果你要将 `XCharts` 加入你的项目中，可以在[Github](https://github.com/monitor1394/unity-ugui-XCharts)上下载最新的 [release](https://github.com/monitor1394/unity-ugui-XCharts/releases)稳定版本，将 `XCharts-vx.x.x.unitypackage` 通过 Unity 导入到你的项目中，或下载 Source code 解压后将内部的 `XCharts` 文件夹拷贝到你项目的 `Assets` 目录下。 + +## 添加一个简单图表 --- -1. 新建场景或在已有场景的 `Canvas` 下添加一个名为 `line_chart` 的 `GameObject`。 -2. 选中 `line_chart`，通过菜单栏 `Component->XCharts->LineChart` 或者 `Inspector` 视图的 `Add Component` 添加 `LineChart` 脚本。设置 `line_chart` 的尺寸，一个简单的折线图就出来了。 -3. 在 `Inspector` 视图下可以调整各个组件的参数，`Game` 视图会实时反馈调整的效果。各个组件的详细参数说明可查阅[XCharts配置项手册](XCharts配置项手册.md)。 +新建场景或在已有场景的 `Canvas` 下添加一个名为 `line_chart` 的 `GameObject`。 + +选中 `line_chart`，通过菜单栏 `Component->XCharts->LineChart` 或者 `Inspector` 视图的 `Add Component` 添加 `LineChart` 脚本。设置 `line_chart` 的尺寸，一个简单的折线图就出来了。 +![linechart](screenshot/linechart.png) +在 `Inspector` 视图下可以调整各个组件的参数，`Game` 视图会实时反馈调整的效果。各个组件的详细参数说明可查阅[XCharts配置项手册](XCharts配置项手册.md)。 +![inspcetor-desc](screenshot/inpsector-desc.png) + +## 用代码添加折线图 + +--- + +给`gameObject`挂上`LineChart`脚本： + +```C# +var chart = gameObject.GetComponent(); +if (chart == null) +{ + chart = gameObject.AddComponent(); +} +``` + +设置标题： + +```C# +chart.title.show = true; +chart.title.text = "Line Simple"; +``` + +设置提示框和图例是否显示： + +```C# +chart.tooltip.show = true; +chart.legend.show = false; +``` + +设置是否使用双坐标轴和坐标轴类型： + +```C# +chart.xAxises[0].show = true; +chart.xAxises[1].show = false; +chart.yAxises[0].show = true; +chart.yAxises[1].show = false; +chart.xAxises[0].type = Axis.AxisType.Category; +chart.yAxises[0].type = Axis.AxisType.Value; +``` + +设置坐标轴分割线： + +```C# +chart.xAxises[0].splitNumber = 10; +chart.xAxises[0].boundaryGap = true; +``` + +清空数据，添加`Line`类型的`Serie`用于接收数据： + +```C# +chart.RemoveData(); +chart.AddSerie(SerieType.Line); +``` + +添加10个数据： + +```C# +for (int i = 0; i < 10; i++) +{ + chart.AddXAxisData("x" + i); + chart.AddData(0, Random.Range(10, 20)); +} +``` + +这样一个简单的折线图就出来了： +![linechart-simple](screenshot/linechart-simple.png) + +你还可以用代码控制更多的参数，[XCharts配置项手册](XCharts配置项手册.md)里面的所有参数都是可以通过代码控制的。 + [返回首页](https://github.com/monitor1394/unity-ugui-XCharts) [XChartsAPI接口](XChartsAPI.md) diff --git a/README.md b/README.md index 08cfad1c..bbe8450a 100644 --- a/README.md +++ b/README.md @@ -37,13 +37,13 @@ QQ交流群：XCharts交流群（202030963） * （2019.09.30）增加`Serie`采样类型`sampleType`的相关配置 * （2019.09.29）增加`SerieSymbol`关于显示间隔的相关配置 * （2019.09.29）重构代码： - 1. `BaseChart`的`sampleDist`删除，`Serie`增加`lineSampleDist` - 2. `BaseChart`的`minShowDataNumber`删除，`Serie`增加`minShow` - 3. `BaseChart`的`maxShowDataNumber`删除，`Serie`增加`maxShow` - 4. `BaseChart`的`maxCacheDataNumber`删除，`Serie`增加`maxCache` - 5. `BaseChart`的`AddSerie()`接口参数调整 - 6. `BaseChart`的`UpdateData()`接口参数调整 - 7. `Axis`增加`maxCache` + * `BaseChart`的`sampleDist`删除，`Serie`增加`lineSampleDist` + * `BaseChart`的`minShowDataNumber`删除，`Serie`增加`minShow` + * `BaseChart`的`maxShowDataNumber`删除，`Serie`增加`maxShow` + * `BaseChart`的`maxCacheDataNumber`删除，`Serie`增加`maxCache` + * `BaseChart`的`AddSerie()`接口参数调整 + * `BaseChart`的`UpdateData()`接口参数调整 + * `Axis`增加`maxCache` * （2019.09.28）增加`LineChart`和`BarChart`同时对`Line`、`Bar`类型`Serie`的支持，实现折线图和柱状图的组合图 * （2019.09.27）增加`Axis`的`splitNumber`设置为`0`时表示绘制所有类目数据 * （2019.09.27）增加`SampleDist`采样距离的配置，对过密的曲线开启采样，优化绘制效率 @@ -176,7 +176,3 @@ QQ交流群：XCharts交流群（202030963） 4. 多雷达图 ### 其他 - -## 入门教程 - -* [XCharts开源库介绍](https://blog.uwa4d.com/archives/UWALab_XCharts.html)