增加Chart的更多快捷创建图表菜单

This commit is contained in:
monitor1394
2024-01-13 22:37:13 +08:00
parent fff04347fa
commit 9a56985b3a
16 changed files with 722 additions and 13 deletions

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Bar chart shows different data through the height of a bar, which is used in rectangular coordinate with at least 1 category axis.
/// || 柱状图(或称条形图)是一种通过柱形的高度(横向的情况下则是宽度)来表现数据大小的一种常用图表类型。
/// </summary>
[AddComponentMenu("XCharts/BarChart", 14)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -22,5 +26,153 @@ namespace XCharts.Runtime
AddXAxisData("x" + (i + 1));
}
}
/// <summary>
/// default zebra column chart.
/// || 斑马柱状图。
/// </summary>
public void DefaultZebraColumnChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.barType = BarType.Zebra;
}
/// <summary>
/// default capsule column chart.
/// || 胶囊柱状图。
/// </summary>
public void DefaultCapsuleColumnChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.barType = BarType.Capsule;
}
/// <summary>
/// default grouped column chart.
/// || 默认分组柱状图。
/// </summary>
public void DefaultGroupedColumnChart()
{
CheckChartInit();
Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default stacked column chart.
/// || 默认堆叠分组柱状图。
/// </summary>
public void DefaultStackedColumnChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
}
/// <summary>
/// default percent column chart.
/// || 默认百分比柱状图。
/// </summary>
public void DefaultPercentColumnChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
serie1.barPercentStack = true;
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
serie2.barPercentStack = true;
}
/// <summary>
/// default bar chart.
/// || 默认条形图。
/// </summary>
public void DefaultBarChart()
{
CheckChartInit();
CovertColumnToBar(this);
}
/// <summary>
/// default zebra bar chart.
/// || 默认斑马条形图。
/// </summary>
public void DefaultZebraBarChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.barType = BarType.Zebra;
CovertColumnToBar(this);
}
/// <summary>
/// default capsule bar chart.
/// || 默认胶囊条形图。
/// </summary>
public void DefaultCapsuleBarChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.barType = BarType.Capsule;
CovertColumnToBar(this);
}
/// <summary>
/// default grouped bar chart.
/// || 默认分组条形图。
/// </summary>
public void DefaultGroupedBarChart()
{
CheckChartInit();
Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
CovertColumnToBar(this);
}
/// <summary>
/// default stacked bar chart.
/// || 默认堆叠条形图。
/// </summary>
public void DefaultStackedBarChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
CovertColumnToBar(this);
}
/// <summary>
/// default percent bar chart.
/// || 默认百分比条形图。
/// </summary>
public void DefaultPercentBarChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
serie1.barPercentStack = true;
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
serie2.barPercentStack = true;
CovertColumnToBar(this);
}
private static void CovertColumnToBar(BarChart chart)
{
chart.ConvertXYAxis(0);
var xAxis = chart.GetChartComponent<XAxis>();
xAxis.axisLine.show = false;
xAxis.axisTick.show = false;
var yAxis = chart.GetChartComponent<YAxis>();
yAxis.axisTick.alignWithLabel = true;
}
}
}

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A candlestick chart is a style of financial chart used to describe price movements of a security, derivative, or currency.
/// || 蜡烛图也叫K线图用于描述证券、衍生品或货币的价格走势的一种金融图表样式。
/// </summary>
[AddComponentMenu("XCharts/CandlestickChart", 23)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

View File

@@ -3,6 +3,12 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Heat map mainly use colors to represent values, which must be used along with visualMap component.
/// It can be used in either rectangular coordinate or geographic coordinate. But the behaviour on them are quite different. Rectangular coordinate must have two categories to use it.
/// ||热力图主要通过颜色去表现数值的大小,必须要配合 visualMap 组件使用。
/// 可以应用在直角坐标系以及地理坐标系上,这两个坐标系上的表现形式相差很大,直角坐标系上必须要使用两个类目轴。
/// </summary>
[AddComponentMenu("XCharts/HeatmapChart", 18)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -13,23 +19,26 @@ namespace XCharts.Runtime
protected override void DefaultChart()
{
var grid = EnsureChartComponent<GridCoord>();
grid.UpdateRuntimeData(this);
grid.left = 0.12f;
var heatmapGridWid = 18f;
int xSplitNumber = (int)(grid.context.width / heatmapGridWid);
int ySplitNumber = (int)(grid.context.height / heatmapGridWid);
var xAxis = EnsureChartComponent<XAxis>();
xAxis.type = Axis.AxisType.Category;
xAxis.splitLine.show = false;
xAxis.boundaryGap = true;
xAxis.splitNumber = 10;
xAxis.splitNumber = xSplitNumber / 2;
var yAxis = EnsureChartComponent<YAxis>();
yAxis.type = Axis.AxisType.Category;
yAxis.splitLine.show = false;
yAxis.boundaryGap = true;
yAxis.splitNumber = 10;
yAxis.splitNumber = ySplitNumber;
RemoveData();
var heatmapGridWid = 10f;
int xSplitNumber = (int) (grid.context.width / heatmapGridWid);
int ySplitNumber = (int) (grid.context.height / heatmapGridWid);
Heatmap.AddDefaultSerie(this, GenerateDefaultSerieName());
var visualMap = EnsureChartComponent<VisualMap>();
@@ -72,5 +81,32 @@ namespace XCharts.Runtime
}
}
}
/// <summary>
/// default count heatmap chart.
/// || 默认计数热力图。
/// </summary>
public void DefaultCountHeatmapChart()
{
CheckChartInit();
var serie = GetSerie<Heatmap>(0);
serie.heatmapType = HeatmapType.Count;
var xAxis = GetChartComponent<XAxis>();
xAxis.type = Axis.AxisType.Value;
xAxis.splitNumber = 4;
var yAxis = GetChartComponent<YAxis>();
yAxis.type = Axis.AxisType.Value;
yAxis.splitNumber = 2;
serie.ClearData();
for (int i = 0; i < 100; i++)
{
var x = UnityEngine.Random.Range(0, 100);
var y = UnityEngine.Random.Range(0, 100);
AddData(0, x, y);
}
}
}
}

View File

@@ -2,6 +2,12 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Line chart relates all the data points symbol by broken lines, which is used to show the trend of data changing.
/// It could be used in both rectangular coordinate andpolar coordinate.
/// ||折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
/// 设置 areaStyle 后可以绘制面积图。
/// </summary>
[AddComponentMenu("XCharts/LineChart", 13)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -22,5 +28,108 @@ namespace XCharts.Runtime
AddXAxisData("x" + (i + 1));
}
}
/// <summary>
/// default area line chart.
/// || 默认面积折线图。
/// </summary>
public void DefaultAreaLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.EnsureComponent<AreaStyle>();
}
/// <summary>
/// default smooth line chart.
/// || 默认平滑折线图。
/// </summary>
public void DefaultSmoothLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.lineType = LineType.Smooth;
}
/// <summary>
/// default smooth area line chart.
/// || 默认平滑面积折线图。
/// </summary>
public void DefaultSmoothAreaLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.EnsureComponent<AreaStyle>();
serie.lineType = LineType.Smooth;
}
/// <summary>
/// default stack line chart.
/// || 默认堆叠折线图。
/// </summary>
public void DefaultStackLineChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
if (serie1 == null) return;
serie1.stack = "stack1";
var serie2 = Line.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
}
/// <summary>
/// default stack area line chart.
/// || 默认堆叠面积折线图。
/// </summary>
public void DefaultStackAreaLineChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
if (serie1 == null) return;
serie1.EnsureComponent<AreaStyle>();
serie1.stack = "stack1";
var serie2 = Line.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.EnsureComponent<AreaStyle>();
serie2.stack = "stack1";
}
/// <summary>
/// default step line chart.
/// || 默认阶梯折线图。
/// </summary>
public void DefaultStepLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.lineType = LineType.StepMiddle;
}
/// <summary>
/// default dash line chart.
/// || 默认虚线折线图。
/// </summary>
public void DefaultDashLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.lineType = LineType.Normal;
serie.lineStyle.type = LineStyle.Type.Dashed;
}
/// <summary>
/// default time line chart.
/// || 默认时间折线图。
/// </summary>
public void DefaultTimeLineChart()
{
CheckChartInit();
var xAxis = GetChartComponent<XAxis>();
xAxis.type = Axis.AxisType.Time;
}
}
}

View File

@@ -3,6 +3,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
/// || 平行坐标系,通过绘制垂直于坐标轴的平行线来显示数据的一种可视化图表。
/// </summary>
[AddComponentMenu("XCharts/ParallelChart", 25)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.
/// || 饼图主要用于显示不同类目占比的情况,通过弧长来反映数据的大小占比。
/// </summary>
[AddComponentMenu("XCharts/PieChart", 15)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -17,5 +21,69 @@ namespace XCharts.Runtime
RemoveData();
Pie.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default label pie chart.
/// || 默认带标签饼图。
/// </summary>
public void DefaultLabelPieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
/// <summary>
/// default donut pie chart.
/// || 默认甜甜圈饼图。
/// </summary>
public void DefaultDonutPieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.radius[0] = 0.20f;
serie.radius[1] = 0.28f;
}
/// <summary>
/// default label donut pie chart.
/// || 默认带标签甜甜圈饼图。
/// </summary>
public void DefaultLabelDonutPieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.radius[0] = 0.20f;
serie.radius[1] = 0.28f;
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
/// <summary>
/// default rose pie chart.
/// || 默认玫瑰饼图。
/// </summary>
public void DefaultRadiusRosePieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.pieRoseType = RoseType.Radius;
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
/// <summary>
/// default area rose pie chart.
/// || 默认面积玫瑰饼图。
/// </summary>
public void DefaultAreaRosePieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.pieRoseType = RoseType.Area;
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
}
}

View File

@@ -1,7 +1,12 @@
using UnityEngine;
using System.Collections.Generic;
namespace XCharts.Runtime
{
/// <summary>
/// Polar coordinates are usually used in a circular layout.
/// || 极坐标系,可以用于散点图和折线图。
/// </summary>
[AddComponentMenu("XCharts/PolarChart", 23)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -13,7 +18,8 @@ namespace XCharts.Runtime
{
EnsureChartComponent<PolarCoord>();
EnsureChartComponent<AngleAxis>();
EnsureChartComponent<RadiusAxis>();
var radiusAxis = EnsureChartComponent<RadiusAxis>();
radiusAxis.axisLabel.show = false;
var tooltip = EnsureChartComponent<Tooltip>();
tooltip.type = Tooltip.Type.Corss;
@@ -23,6 +29,7 @@ namespace XCharts.Runtime
var serie = Line.AddDefaultSerie(this, GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int i = 0; i <= 360; i++)
{
var t = i / 180f * Mathf.PI;
@@ -30,5 +37,132 @@ namespace XCharts.Runtime
AddData(0, Mathf.Abs(r), i);
}
}
/// <summary>
/// default radial bar polar chart.
/// || 默认径向柱状极坐标图。
/// </summary>
public void DefaultRadialBarPolarChart()
{
CheckChartInit();
RemoveData();
var polarCoord = GetChartComponent<PolarCoord>();
polarCoord.radius[0] = 20;
var categorys = new string[] { "a", "b", "c", "d" };
var radiusAxis = GetChartComponent<RadiusAxis>();
radiusAxis.splitNumber = 4;
var angleAxis = GetChartComponent<AngleAxis>();
angleAxis.type = Axis.AxisType.Category;
angleAxis.startAngle = 75;
angleAxis.boundaryGap = true;
angleAxis.splitLine.show = false;
foreach (var category in categorys)
angleAxis.AddData(category);
var serie = AddSerie<Bar>(GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int i = 0; i < categorys.Length; i++)
{
var x = UnityEngine.Random.Range(0f, 4f);
var y = i;
AddData(0, x, y, categorys[i]);
}
}
/// <summary>
/// default tangential bar polar chart.
/// || 默认切向柱状极坐标图。
/// </summary>
public void DefaultTangentialBarPolarChart()
{
CheckChartInit();
RemoveData();
var polarCoord = GetChartComponent<PolarCoord>();
polarCoord.radius[0] = 20;
var categorys = new string[] { "a", "b", "c", "d" };
var radiusAxis = GetChartComponent<RadiusAxis>();
radiusAxis.type = Axis.AxisType.Category;
radiusAxis.splitNumber = 4;
radiusAxis.boundaryGap = true;
var angleAxis = GetChartComponent<AngleAxis>();
angleAxis.type = Axis.AxisType.Value;
radiusAxis.splitNumber = 12;
angleAxis.startAngle = 75;
angleAxis.max = 4;
foreach (var category in categorys)
radiusAxis.AddData(category);
var serie = AddSerie<Bar>(GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int i = 0; i < categorys.Length; i++)
{
var x = UnityEngine.Random.Range(0f, 4f);
var y = i;
AddData(0, y, x, categorys[i]);
}
}
/// <summary>
/// default heatmap polar chart.
/// || 默认极坐标色块图。
/// </summary>
public void DefaultHeatmapPolarChart()
{
CheckChartInit();
RemoveData();
var visualMap = EnsureChartComponent<VisualMap>();
var colors = new List<string> { "#BAE7FF", "#1890FF", "#1028ff" };
visualMap.AddColors(colors);
visualMap.autoMinMax = true;
var polarCoord = GetChartComponent<PolarCoord>();
polarCoord.radius[0] = 20;
var categorys = new string[] { "a", "b", "c", "d" };
var radiusAxis = GetChartComponent<RadiusAxis>();
radiusAxis.type = Axis.AxisType.Category;
radiusAxis.splitNumber = 4;
radiusAxis.boundaryGap = true;
var angleAxis = GetChartComponent<AngleAxis>();
angleAxis.type = Axis.AxisType.Category;
angleAxis.boundaryGap = true;
angleAxis.splitNumber = 24;
angleAxis.startAngle = 75;
angleAxis.max = 4;
foreach (var category in categorys)
radiusAxis.AddData(category);
for (int i = 0; i < 24; i++)
{
angleAxis.AddData(i + "h");
}
var serie = AddSerie<Heatmap>(GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int x = 0; x < 4; x++)
{
for (int y = 0; y < 24; y++)
{
AddData(0, x, y, UnityEngine.Random.Range(0f, 4f));
}
}
}
}
}

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies radar component.
/// || 雷达图主要用于显示多变量的数据,例如足球运动员的各项属性分析。依赖雷达组件。
/// </summary>
[AddComponentMenu("XCharts/RadarChart", 16)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -16,5 +20,16 @@ namespace XCharts.Runtime
AddChartComponent<RadarCoord>();
Radar.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default circle radar chart.
/// || 默认圆形雷达图。
/// </summary>
public void DefaultCircleRadarChart()
{
CheckChartInit();
var radarCoord = GetChartComponent<RadarCoord>();
radarCoord.shape = RadarCoord.Shape.Circle;
}
}
}

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Ring chart is mainly used to show the proportion of each item and the relationship between the items.
/// || 环形图主要用于显示每一项的比例以及各项之间的关系。
/// </summary>
[AddComponentMenu("XCharts/RingChart", 20)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -15,5 +19,18 @@ namespace XCharts.Runtime
RemoveData();
Ring.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default multiple ring chart.
/// || 默认多圆环图。
/// </summary>
public void DefaultMultipleRingChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.label.show = false;
AddData(0, UnityEngine.Random.Range(30, 90), 100, "data2");
AddData(0, UnityEngine.Random.Range(30, 90), 100, "data3");
}
}
}

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Scatter chart is mainly used to show the relationship between two data dimensions.
/// || 散点图主要用于展现两个数据维度之间的关系。
/// </summary>
[AddComponentMenu("XCharts/ScatterChart", 17)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -24,5 +28,21 @@ namespace XCharts.Runtime
RemoveData();
Scatter.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default bubble chart.
/// || 默认气泡图。
/// </summary>
public void DefaultBubbleChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.itemStyle.borderWidth = 2f;
serie.itemStyle.borderColor = theme.GetColor(0);
serie.itemStyle.opacity = 0.35f;
serie.symbol.sizeType = SymbolSizeType.FromData;
serie.symbol.dataScale = 0.3f;
serie.symbol.maxSize = 30f;
}
}
}

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A simplified bar chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
/// || 简化柱状图是柱状图的简化模式,通过简化组件和配置,拥有更好的性能。
/// </summary>
[AddComponentMenu("XCharts/SimplifiedBarChart", 27)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A simplified candlestick chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
/// || 简化K线图是K线图的简化模式通过简化组件和配置拥有更好的性能。
/// </summary>
[AddComponentMenu("XCharts/SimplifiedCandlestickChart", 28)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A simplified line chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
/// || 简化折线图是折线图的简化模式,通过简化组件和配置,拥有更好的性能。
/// </summary>
[AddComponentMenu("XCharts/SimplifiedLineChart", 26)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]