AntdUI中的Chart图表控件，几乎包括了常用的Line折线图，Bar柱状图，Pie面积图等图标类型，但在github中没有对应的文档说明，目前能找到的资料貌似只有这篇，https://blog.csdn.net/gitblog_00202/article/details/151009230，介绍了几种常用图表的属性设置和数据绑定。所以后期需要使用图表控件的话，还是需要借助AAuto来反射AndtUI.dll内部图表相关函数，更方便些。
*AntdUI需要保持2.4.1以上版本，因为在老版本中，HorizontalBar和StackedHorizontalBar会有绘制超出画布边界的情况。
import win.ui;
import dotNet;
import dotNet.AntdUI;
dotNet.import("AntdUI");
/*DSG{{*/
var winform = win.form(text="AntdUI Chart";right=900;bottom=761;border="thin")
winform.add(
custom_base={cls="custom";left=0;top=0;right=900;bottom=760;db=1;dl=1;dr=1;dt=1;hide=1;z=1};
custom_chart={cls="custom";left=25;top=147;right=875;bottom=655;db=1;dl=1;dr=1;dt=1;z=4};
custom_desc={cls="custom";left=25;top=54;right=875;bottom=84;z=3};
custom_title={cls="custom";left=25;top=15;right=280;bottom=50;z=2};
custom_type={cls="custom";left=27;top=100;right=267;bottom=139;z=5}
)
/*}}*/
// BaseForm
var baseForm = AntdUI.BaseForm();
baseForm.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
baseForm.Dock = System.Windows.Forms.DockStyle.Fill;
dotNet.setParent(baseForm, winform.custom_base);
// Fonts
var fontTitle = System.Drawing.Font("Microsoft YaHei", 14, System.Drawing.FontStyle.Bold);
var fontDesc = System.Drawing.Font("Microsoft YaHei", 9);
// Title
var title = AntdUI.Label(winform.custom_title);
title.Text = "Chart";
title.Font = fontTitle;
// Description
var desc = AntdUI.Label(winform.custom_desc);
desc.Text = "AntdUI Chart used to display various chart types. Common properties: ChartType, Datasets, ShowGrid, ShowAxes, ShowTooltip, ShowLegend, EnableAnimation.";
desc.Font = fontDesc;
// Chart
var chart = AntdUI.Chart(winform.custom_chart);
chart.Title = "";
chart.TitleFont = System.Drawing.Font("Microsoft YaHei", 12, System.Drawing.FontStyle.Bold);
chart.ShowGrid = true;
chart.ShowAxes = true;
chart.ShowTooltip = true;
chart.ShowLegend = true;
chart.EnableAnimation = true;
chart.AnimationDuration = 600;
// Color helper function
var toNetColor = function(argb){
if(argb < 0) argb += 0x100000000;
return System.Drawing.Color.FromArgb(
(argb >> 24) & 0xFF, (argb >> 16) & 0xFF,
(argb >> 8) & 0xFF, argb & 0xFF
);
};
// ★ Antd style 10-color palette (for Pie/Doughnut data point coloring)
var piePalette = [
0xFFFF6384, // Strawberry Red
0xFF36A2EB, // Sky Blue
0xFFFFCE56, // Sunflower Yellow
0xFF4BC0C0, // Mint Green
0xFF9966FF, // Lavender Purple
0xFFFF9F40, // Citrus Orange
0xFFE7E9ED, // Light Gray
0xFF4D99FF, // Royal Blue
0xFF00E396, // Emerald Green
0xFFF569A6, // Rose Red
];
// ★ Color each data point of a Pie/Doughnut dataset
var colorPieDataset = function(ds, startIndex){
startIndex = startIndex || 0;
var e = ds.DataPoints.GetEnumerator();
var i = startIndex;
while(e.MoveNext()){
var dp = e.Current;
var argb = piePalette[i % #piePalette + 1];
dp.Color = System.Drawing.Color.FromArgb(
(argb >> 24) & 0xFF, (argb >> 16) & 0xFF,
(argb >> 8) & 0xFF, argb & 0xFF
);
i++;
}
e.Dispose();
};
// ---- Per-chart-type demo data ----
// Enum values: 0=Area, 1=Bar, 2=Bubble, 3=Doughnut, 4=HorizontalBar, 5=Line
// 6=Pie, 7=PolarArea, 8=Radar, 9=Scatter, 10=Spline, 11=SplineArea
// 12=StackedBar, 13=StackedHorizontalBar, 14=SteppedArea, 15=SteppedLine
var fillChartData = function(chartType){
var ds = chart.Datasets;
ds.Clear();
select(chartType){
case 5 { // Line
chart.Title = "📈 Monthly Sales Trend";
var ds1 = AntdUI.ChartDataset("2024");
ds1.BorderWidth = dotNet.float(2.5);
ds1.FillColor = 0x20FF6384; ds1.BorderColor = 0xFFFF6384;
ds1.AddPoint("Jan",1,120);ds1.AddPoint("Feb",2,180);ds1.AddPoint("Mar",3,150);
ds1.AddPoint("Apr",4,210);ds1.AddPoint("May",5,190);ds1.AddPoint("Jun",6,260);
ds1.AddPoint("Jul",7,220);ds1.AddPoint("Aug",8,280);ds1.AddPoint("Sep",9,250);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("2025");
ds2.BorderWidth = dotNet.float(2.5);
ds2.FillColor = 0x2036A2EB; ds2.BorderColor = 0xFF36A2EB;
ds2.AddPoint("Jan",1,140);ds2.AddPoint("Feb",2,200);ds2.AddPoint("Mar",3,170);
ds2.AddPoint("Apr",4,240);ds2.AddPoint("May",5,220);ds2.AddPoint("Jun",6,290);
ds2.AddPoint("Jul",7,250);ds2.AddPoint("Aug",8,310);ds2.AddPoint("Sep",9,280);
ds.Add(ds2);
}
case 1 { // Bar
chart.Title = "📊 Quarterly Revenue Comparison";
var ds1 = AntdUI.ChartDataset("E-Commerce");
ds1.BorderWidth = dotNet.float(1.5);
ds1.FillColor = 0x604FC3F7; ds1.BorderColor = 0xFF4FC3F7;
ds1.AddPoint("Q1",1,85);ds1.AddPoint("Q2",2,95);ds1.AddPoint("Q3",3,110);ds1.AddPoint("Q4",4,130);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Offline");
ds2.BorderWidth = dotNet.float(1.5);
ds2.FillColor = 0x60FF8A65; ds2.BorderColor = 0xFFFF8A65;
ds2.AddPoint("Q1",1,65);ds2.AddPoint("Q2",2,78);ds2.AddPoint("Q3",3,92);ds2.AddPoint("Q4",4,105);
ds.Add(ds2);
var ds3 = AntdUI.ChartDataset("New Retail");
ds3.BorderWidth = dotNet.float(1.5);
ds3.FillColor = 0x6081C784; ds3.BorderColor = 0xFF81C784;
ds3.AddPoint("Q1",1,45);ds3.AddPoint("Q2",2,60);ds3.AddPoint("Q3",3,75);ds3.AddPoint("Q4",4,95);
ds.Add(ds3);
}
case 0 { // Area
chart.Title = "🌊 User Growth Trend";
var ds1 = AntdUI.ChartDataset("Registered Users");
ds1.BorderWidth = dotNet.float(2);
ds1.FillColor = 0x604FC3F7;
ds1.BorderColor = 0xFF4FC3F7;
ds1.Opacity = dotNet.float(0.38);
ds1.AddPoint("Jan",1,2000);ds1.AddPoint("Feb",2,3500);ds1.AddPoint("Mar",3,2800);
ds1.AddPoint("Apr",4,4500);ds1.AddPoint("May",5,3800);ds1.AddPoint("Jun",6,5200);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Active Users");
ds2.BorderWidth = dotNet.float(2);
ds2.FillColor = 0x60BA68C8;
ds2.BorderColor = 0xFFBA68C8;
ds2.Opacity = dotNet.float(0.38);
ds2.AddPoint("Jan",1,1200);ds2.AddPoint("Feb",2,2100);ds2.AddPoint("Mar",3,1800);
ds2.AddPoint("Apr",4,3100);ds2.AddPoint("May",5,2600);ds2.AddPoint("Jun",6,3700);
ds.Add(ds2);
}
case 6 { // Pie
chart.Title = "🎯 Market Share Distribution";
var ds1 = AntdUI.ChartDataset("2025");
ds1.BorderWidth = dotNet.float(2);
ds1.AddPoint("Tencent Cloud",1,35);ds1.AddPoint("Alibaba Cloud",2,28);ds1.AddPoint("Huawei Cloud",3,22);
ds1.AddPoint("AWS",4,10);ds1.AddPoint("Others",5,5);
ds.Add(ds1);
colorPieDataset(ds1); // ★ Color
}
case 3 { // Doughnut
chart.Title = "💍 Budget Allocation";
var ds1 = AntdUI.ChartDataset("Budget");
ds1.BorderWidth = dotNet.float(2);
ds1.AddPoint("R&D",1,40);ds1.AddPoint("Marketing",2,25);ds1.AddPoint("Operations",3,20);
ds1.AddPoint("HR",4,10);ds1.AddPoint("Others",5,5);
ds.Add(ds1);
colorPieDataset(ds1, 2); // ★ Color, offset start index
}
case 8 { // Radar
chart.Title = "🕸️ Product Capability Assessment";
var ds1 = AntdUI.ChartDataset("Product A");
ds1.BorderWidth = dotNet.float(2);
ds1.FillColor = 0x30FF6384; ds1.BorderColor = 0xFFFF6384;
ds1.AddPoint("Performance",1,92);ds1.AddPoint("Stability",2,88);ds1.AddPoint("UX",3,78);
ds1.AddPoint("Security",4,96);ds1.AddPoint("Scalability",5,82);ds1.AddPoint("Cost",6,70);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Product B");
ds2.BorderWidth = dotNet.float(2);
ds2.FillColor = 0x3036A2EB; ds2.BorderColor = 0xFF36A2EB;
ds2.AddPoint("Performance",1,72);ds2.AddPoint("Stability",2,92);ds2.AddPoint("UX",3,96);
ds2.AddPoint("Security",4,78);ds2.AddPoint("Scalability",5,88);ds2.AddPoint("Cost",6,92);
ds.Add(ds2);
}
case 9 { // Scatter
chart.Title = "✨ Sample Distribution";
var ds1 = AntdUI.ChartDataset("Training Set");
ds1.BorderWidth = dotNet.float(2); // 适当加粗边框，让散点更明显
ds1.BorderColor = 0xFF4FC3F7;
ds1.FillColor = 0x204FC3F7; // 半透明填充，增强视觉
for(i=1;15){ds1.AddPoint(tostring(i), i, math.random(15,95));}
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Validation Set");
ds2.BorderWidth = dotNet.float(2);
ds2.BorderColor = 0xFFFF8A65;
ds2.FillColor = 0x20FF8A65; // 半透明填充，与数据集一区分
for(i=1;12){ds2.AddPoint(tostring(i), i + 0.5, math.random(20,90));}
ds.Add(ds2);
}
case 2 { // Bubble
chart.Title = "💎 Project ROI";
var ds1 = AntdUI.ChartDataset("Key Projects");
ds1.BorderWidth = dotNet.float(1.5);
ds1.BorderColor = 0xFF66BB6A;
ds1.FillColor = 0x4066BB6A; // 半透明填充，保留立体感
// 气泡图每个点可指定独立半径（第四个参数），若库支持
ds1.AddPoint("Project A",1,65,12);
ds1.AddPoint("Project B",2,88,18);
ds1.AddPoint("Project C",3,72,10);
ds1.AddPoint("Project D",4,95,20);
ds1.AddPoint("Project E",5,55,8);
ds1.AddPoint("Project F",6,80,15);
ds.Add(ds1);
}
case 7 { // PolarArea
chart.Title = "🎡 Satisfaction Survey";
var ds1 = AntdUI.ChartDataset("Score");
ds1.BorderWidth = dotNet.float(1.5);
ds1.AddPoint("Product Experience",1,88);ds1.AddPoint("Service Quality",2,76);ds1.AddPoint("Response Speed",3,92);
ds1.AddPoint("Fair Pricing",4,68);ds1.AddPoint("Feature Completeness",5,84);
ds.Add(ds1);
colorPieDataset(ds1, 4); // ★ Color
}
case 10 { // Spline
chart.Title = "〰️ Temperature Trend";
var ds1 = AntdUI.ChartDataset("Beijing");
ds1.BorderWidth = dotNet.float(2.5);
ds1.FillColor = 0x20FF7043; ds1.BorderColor = 0xFFFF7043;
ds1.AddPoint("Jan",1,-2);ds1.AddPoint("Mar",3,10);ds1.AddPoint("May",5,22);
ds1.AddPoint("Jul",7,30);ds1.AddPoint("Sep",9,24);ds1.AddPoint("Nov",11,8);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Shanghai");
ds2.BorderWidth = dotNet.float(2.5);
ds2.FillColor = 0x205C6BC0; ds2.BorderColor = 0xFF5C6BC0;
ds2.AddPoint("Jan",1,5);ds2.AddPoint("Mar",3,14);ds2.AddPoint("May",5,24);
ds2.AddPoint("Jul",7,32);ds2.AddPoint("Sep",9,26);ds2.AddPoint("Nov",11,14);
ds.Add(ds2);
}
case 11 { // SplineArea
chart.Title = "🌊 Rainfall Distribution";
var ds1 = AntdUI.ChartDataset("2024");
ds1.BorderWidth = dotNet.float(2);
ds1.FillColor = 0x5042A5F5;
ds1.BorderColor = 0xFF42A5F5;
ds1.Opacity = dotNet.float(0.31);
ds1.AddPoint("Jan",1,20);ds1.AddPoint("Mar",3,45);ds1.AddPoint("May",5,80);
ds1.AddPoint("Jul",7,160);ds1.AddPoint("Sep",9,90);ds1.AddPoint("Nov",11,35);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("2025");
ds2.BorderWidth = dotNet.float(2);
ds2.FillColor = 0x50AB47BC; ds2.BorderColor = 0xFFAB47BC;
ds2.Opacity = dotNet.float(0.31);
ds2.AddPoint("Jan",1,15);ds2.AddPoint("Mar",3,38);ds2.AddPoint("May",5,72);
ds2.AddPoint("Jul",7,180);ds2.AddPoint("Sep",9,95);ds2.AddPoint("Nov",11,30);
ds.Add(ds2);
}
case 4 { // HorizontalBar
chart.Title = "🏆 Product Sales Ranking";
var ds1 = AntdUI.ChartDataset("Sales (10K units)");
ds1.BorderWidth = dotNet.float(1.5);
ds1.FillColor = 0x60FFA726; ds1.BorderColor = 0xFFFFA726;
ds1.AddPoint("Product A",1,95);ds1.AddPoint("Product B",2,82);ds1.AddPoint("Product C",3,68);
ds1.AddPoint("Product D",4,55);ds1.AddPoint("Product E",5,42);
ds.Add(ds1);
}
case 12 { // StackedBar
chart.Title = "📚 Product Sales Breakdown";
var ds1 = AntdUI.ChartDataset("Online");
ds1.BorderWidth = dotNet.float(1.5);
ds1.FillColor = 0x60EF5350; ds1.BorderColor = 0xFFEF5350;
ds1.AddPoint("Q1",1,45);ds1.AddPoint("Q2",2,52);ds1.AddPoint("Q3",3,60);ds1.AddPoint("Q4",4,75);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Offline");
ds2.BorderWidth = dotNet.float(1.5);
ds2.FillColor = 0x6042A5F5; ds2.BorderColor = 0xFF42A5F5;
ds2.AddPoint("Q1",1,35);ds2.AddPoint("Q2",2,38);ds2.AddPoint("Q3",3,42);ds2.AddPoint("Q4",4,50);
ds.Add(ds2);
var ds3 = AntdUI.ChartDataset("Channel");
ds3.BorderWidth = dotNet.float(1.5);
ds3.FillColor = 0x6066BB6A; ds3.BorderColor = 0xFF66BB6A;
ds3.AddPoint("Q1",1,25);ds3.AddPoint("Q2",2,30);ds3.AddPoint("Q3",3,35);ds3.AddPoint("Q4",4,45);
ds.Add(ds3);
}
case 13 { // StackedHorizontalBar
chart.Title = "📋 Team Resource Allocation";
var ds1 = AntdUI.ChartDataset("Dev");
ds1.BorderWidth = dotNet.float(1.5);
ds1.FillColor = 0x60AB47BC; ds1.BorderColor = 0xFFAB47BC;
ds1.AddPoint("Project A",1,30);ds1.AddPoint("Project B",2,25);ds1.AddPoint("Project C",3,20);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Design");
ds2.BorderWidth = dotNet.float(1.5);
ds2.FillColor = 0x6026A69A; ds2.BorderColor = 0xFF26A69A;
ds2.AddPoint("Project A",1,15);ds2.AddPoint("Project B",2,12);ds2.AddPoint("Project C",3,10);
ds.Add(ds2);
var ds3 = AntdUI.ChartDataset("Operations");
ds3.BorderWidth = dotNet.float(1.5);
ds3.FillColor = 0x60FF7043; ds3.BorderColor = 0xFFFF7043;
ds3.AddPoint("Project A",1,20);ds3.AddPoint("Project B",2,15);ds3.AddPoint("Project C",3,10);
ds.Add(ds3);
}
case 15 { // SteppedLine
chart.Title = "📉 Inventory Change Curve";
var ds1 = AntdUI.ChartDataset("Finished Goods");
ds1.BorderWidth = dotNet.float(2.5);
ds1.FillColor = 0x20EC407A; ds1.BorderColor = 0xFFEC407A;
ds1.AddPoint("Jan",1,120);ds1.AddPoint("Feb",2,95);ds1.AddPoint("Mar",3,130);
ds1.AddPoint("Apr",4,110);ds1.AddPoint("May",5,145);ds1.AddPoint("Jun",6,125);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Raw Materials");
ds2.BorderWidth = dotNet.float(2.5);
ds2.FillColor = 0x207E57C2; ds2.BorderColor = 0xFF7E57C2;
ds2.AddPoint("Jan",1,200);ds2.AddPoint("Feb",2,180);ds2.AddPoint("Mar",3,210);
ds2.AddPoint("Apr",4,190);ds2.AddPoint("May",5,230);ds2.AddPoint("Jun",6,210);
ds.Add(ds2);
}
case 14 { // SteppedArea
chart.Title = "🚦 Website Traffic Stats";
var ds1 = AntdUI.ChartDataset("Desktop");
ds1.BorderWidth = dotNet.float(2);
ds1.FillColor = 0x6026C6DA;
ds1.BorderColor = 0xFF26C6DA;
ds1.Opacity = dotNet.float(0.3);
ds1.AddPoint("Mon",1,8000);ds1.AddPoint("Tue",2,7500);ds1.AddPoint("Wed",3,9000);
ds1.AddPoint("Thu",4,8500);ds1.AddPoint("Fri",5,7000);ds1.AddPoint("Sat",6,6000);
ds1.AddPoint("Sun",7,5500);
ds.Add(ds1);
var ds2 = AntdUI.ChartDataset("Mobile");
ds2.BorderWidth = dotNet.float(2);
ds2.FillColor = 0x60EF5350;
ds2.BorderColor = 0xFFEF5350;
ds2.Opacity = dotNet.float(0.2);
ds2.AddPoint("Mon",1,12000);ds2.AddPoint("Tue",2,11000);ds2.AddPoint("Wed",3,13500);
ds2.AddPoint("Thu",4,13000);ds2.AddPoint("Fri",5,11000);ds2.AddPoint("Sat",6,9500);
ds2.AddPoint("Sun",7,8500);
ds.Add(ds2);
}
}
};
// Initialize: Line chart
chart.ChartType = 5;
fillChartData(5);
chart.RefreshChart();
// Type selector
var typeSel = AntdUI.Select(winform.custom_type);
typeSel.Items.Add( AntdUI.SelectItem("Line",5) );
typeSel.Items.Add( AntdUI.SelectItem("Area",0) );
typeSel.Items.Add( AntdUI.SelectItem("Bar",1) );
typeSel.Items.Add( AntdUI.SelectItem("Pie",6) );
typeSel.Items.Add( AntdUI.SelectItem("Doughnut",3) );
typeSel.Items.Add( AntdUI.SelectItem("Radar",8) );
typeSel.Items.Add( AntdUI.SelectItem("Scatter",9) );
typeSel.Items.Add( AntdUI.SelectItem("Bubble",2) );
typeSel.Items.Add( AntdUI.SelectItem("PolarArea",7) );
typeSel.Items.Add( AntdUI.SelectItem("Spline",10) );
typeSel.Items.Add( AntdUI.SelectItem("SplineArea",11) );
typeSel.Items.Add( AntdUI.SelectItem("HorizontalBar",4) );
typeSel.Items.Add( AntdUI.SelectItem("StackedBar",12) );
typeSel.Items.Add( AntdUI.SelectItem("StackedHorizontalBar",13) );
typeSel.Items.Add( AntdUI.SelectItem("SteppedLine",15) );
typeSel.Items.Add( AntdUI.SelectItem("SteppedArea",14) );
typeSel.PrefixText = "Type";
typeSel.PrefixFore = 0xFF6D6D6D;
typeSel.SelectedIndex = 0;
typeSel.SelectedIndexChanged = function(sender,e){
chart.ChartType = sender.SelectedValue;
fillChartData(sender.SelectedValue);
chart.RefreshChart();
};
// ★ Debounce click to prevent multiple firings per single click
var lastPointClickTick = 0;
chart.PointClick = function(sender,e){
var now = time.tick();
if(now - lastPointClickTick < 500) return; // Ignore if within 500ms
lastPointClickTick = now;
try{
var p = e.DataPoint;
if(p && p.Label){
AntdUI.Message.info(baseForm, p.Label ++ " : " ++ tostring(p.Y));
}
}catch(err){}
};
// Dispose fonts on close
winform.onClose = function(){
fontTitle.Dispose();
fontDesc.Dispose();
};
winform.show();
win.loopMessage();
