Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290
Telerik Chart 是功能强大的数据可视化控件,支持多种图表类型和丰富的交互功能。它能够将复杂的数据转化为直观的可视化图表,帮助用户更好地理解数据趋势和模式。
| 分类 | 图表类型 | 适用场景 | |------|----------|----------| | 基础图表 | 柱状图、条形图、折线图、面积图 | 数据对比、趋势展示 | | 统计图表 | 饼图、环形图、漏斗图 | 占比分析、流程分析 | | 高级图表 | 散点图、气泡图、雷达图 | 多维数据分析 | | 金融图表 | K线图、股票图 | 金融数据分析 |
@(Html.Kendo().Chart<SalesData>()
.Name("columnChart")
.Title("月度销售统计")
.Legend(legend => legend.Position(ChartLegendPosition.Top))
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetMonthlySales", "Chart"))
)
.Series(series =>
{
series.Column(model => model.Sales)
.Name("销售额")
.Color("#3498db");
})
.CategoryAxis(axis => axis
.Categories(model => model.Month)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:C}"))
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("月份: #= category #<br/>销售额: #= kendo.format('{0:C}', value) #")
)
)
对应的数据模型和控制器:
public class SalesData
{
public string Month { get; set; }
public decimal Sales { get; set; }
public decimal Target { get; set; }
}
[HttpPost]
public IActionResult GetMonthlySales()
{
var data = new List<SalesData>
{
new SalesData { Month = "1月", Sales = 120000, Target = 100000 },
new SalesData { Month = "2月", Sales = 135000, Target = 110000 },
new SalesData { Month = "3月", Sales = 98000, Target = 120000 },
new SalesData { Month = "4月", Sales = 156000, Target = 130000 },
new SalesData { Month = "5月", Sales = 189000, Target = 140000 },
new SalesData { Month = "6月", Sales = 201000, Target = 150000 }
};
return Json(data);
}
@(Html.Kendo().Chart<SalesData>()
.Name("multiColumnChart")
.Title("销售额与目标对比")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetMonthlySales", "Chart"))
)
.Series(series =>
{
series.Column(model => model.Sales)
.Name("实际销售")
.Color("#3498db")
.Tooltip(tooltip => tooltip.Template("实际: #= kendo.format('{0:C}', value) #"));
series.Column(model => model.Target)
.Name("销售目标")
.Color("#e74c3c")
.Tooltip(tooltip => tooltip.Template("目标: #= kendo.format('{0:C}', value) #"));
})
.CategoryAxis(axis => axis.Categories(model => model.Month))
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:C}"))
)
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
)
@(Html.Kendo().Chart<ProductSalesData>()
.Name("stackedColumnChart")
.Title("产品分类销售构成")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetProductSales", "Chart"))
)
.Series(series =>
{
series.Column(model => model.Electronics)
.Name("电子产品")
.Stack(true)
.Color("#3498db");
series.Column(model => model.Clothing)
.Name("服装")
.Stack(true)
.Color("#e74c3c");
series.Column(model => model.Books)
.Name("图书")
.Stack(true)
.Color("#2ecc71");
})
.CategoryAxis(axis => axis.Categories(model => model.Quarter))
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:C}"))
)
)
@(Html.Kendo().Chart<TrendData>()
.Name("lineChart")
.Title("网站流量趋势")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetTrafficTrend", "Chart"))
)
.Series(series =>
{
series.Line(model => model.PageViews)
.Name("页面浏览量")
.Color("#3498db")
.Width(3)
.Markers(markers => markers
.Type(ChartMarkerShape.Circle)
.Size(6)
);
})
.CategoryAxis(axis => axis
.Categories(model => model.Date)
.Labels(labels => labels.Format("{0:MM/dd}"))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.Title("访问量")
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("日期: #= category #<br/>访问量: #= kendo.format('{0:N0}', value) #")
)
)
@(Html.Kendo().Chart<WebAnalyticsData>()
.Name("multiLineChart")
.Title("网站分析数据")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetWebAnalytics", "Chart"))
)
.Series(series =>
{
series.Line(model => model.PageViews)
.Name("页面浏览量")
.Color("#3498db")
.Width(2);
series.Line(model => model.UniqueVisitors)
.Name("独立访客")
.Color("#e74c3c")
.Width(2);
series.Line(model => model.BounceRate)
.Name("跳出率 (%)")
.Color("#f39c12")
.Width(2)
.Axis("bounceRateAxis");
})
.CategoryAxis(axis => axis
.Categories(model => model.Date)
.Labels(labels => labels.Format("{0:MM/dd}"))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.Title("访问量")
)
.ValueAxis(axis => axis
.Numeric()
.Name("bounceRateAxis")
.Labels(labels => labels.Format("{0}%"))
.Title("跳出率")
.Position(ChartAxisPosition.Right)
)
)
@(Html.Kendo().Chart<CategoryData>()
.Name("pieChart")
.Title("销售分类占比")
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
.Labels(labels => labels.Template("#= text # (#= kendo.format('{0:P}', percentage)#)"))
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetCategorySales", "Chart"))
)
.Series(series =>
{
series.Pie(model => model.Value, model => model.Category)
.Labels(labels => labels
.Visible(true)
.Template("#= category #: #= kendo.format('{0:P}', percentage) #")
.Position(ChartPieLabelsPosition.OutsideEnd)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= category #<br/>金额: #= kendo.format('{0:C}', value) #<br/>占比: #= kendo.format('{0:P}', percentage) #")
);
})
.Tooltip(tooltip => tooltip.Visible(true))
)
@(Html.Kendo().Chart<CategoryData>()
.Name("donutChart")
.Title("市场份额分布")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetMarketShare", "Chart"))
)
.Series(series =>
{
series.Pie(model => model.Value, model => model.Category)
.StartAngle(150)
.HoleSize(80)
.Labels(labels => labels
.Visible(true)
.Template("#= category #")
.Position(ChartPieLabelsPosition.Center)
);
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= category #: #= kendo.format('{0:P}', percentage) #")
)
)
@(Html.Kendo().Chart<MixedData>()
.Name("mixedChart")
.Title("销售额与利润率分析")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetMixedData", "Chart"))
)
.Series(series =>
{
// 柱状图显示销售额
series.Column(model => model.Sales)
.Name("销售额")
.Color("#3498db")
.Tooltip(tooltip => tooltip.Template("销售额: #= kendo.format('{0:C}', value) #"));
// 折线图显示利润率
series.Line(model => model.ProfitMargin)
.Name("利润率")
.Color("#e74c3c")
.Width(3)
.Axis("profitAxis")
.Markers(markers => markers.Size(8))
.Tooltip(tooltip => tooltip.Template("利润率: #= value #%"));
})
.CategoryAxis(axis => axis.Categories(model => model.Period))
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:C}"))
.Title("销售额")
)
.ValueAxis(axis => axis
.Numeric()
.Name("profitAxis")
.Labels(labels => labels.Format("{0}%"))
.Title("利润率")
.Position(ChartAxisPosition.Right)
)
)
// SignalR Hub
public class ChartHub : Hub
{
public async Task JoinGroup(string groupName)
{
await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
}
}
// 数据服务
public class RealTimeDataService
{
private readonly IHubContext<ChartHub> _hubContext;
private readonly Timer _timer;
public RealTimeDataService(IHubContext<ChartHub> hubContext)
{
_hubContext = hubContext;
_timer = new Timer(SendRealTimeData, null, TimeSpan.Zero, TimeSpan.FromSeconds(5));
}
private async void SendRealTimeData(object state)
{
var data = GenerateRealTimeData();
await _hubContext.Clients.All.SendAsync("UpdateChartData", data);
}
private object GenerateRealTimeData()
{
var random = new Random();
return new
{
timestamp = DateTime.Now,
value = random.Next(50, 200),
category = "实时数据"
};
}
}
@(Html.Kendo().Chart<RealTimeData>()
.Name("realTimeChart")
.Title("实时数据监控")
.DataSource(dataSource => dataSource
.SignalR()
.Transport(transport => transport
.Promise("hubStart")
.Hub("chartHub")
.Client(client => client
.Read("updateChartData")
)
)
.Schema(schema => schema
.Model(model => {
model.Id("timestamp");
})
)
)
.Series(series =>
{
series.Line(model => model.Value)
.Name("实时值")
.Color("#3498db")
.Width(2);
})
.CategoryAxis(axis => axis
.Categories(model => model.Timestamp)
.Labels(labels => labels.Format("{0:HH:mm:ss}"))
.MajorGridLines(lines => lines.Visible(false))
)
)
<script src="~/lib/signalr/signalr.min.js"></script>
<script>
// SignalR 连接
var connection = new signalR.HubConnectionBuilder()
.withUrl("/charthub")
.build();
var hubStart = connection.start();
// 接收实时数据
connection.on("updateChartData", function(data) {
var chart = $("#realTimeChart").data("kendoChart");
var dataSource = chart.dataSource;
// 添加新数据点
dataSource.add(data);
// 保持最近50个数据点
var items = dataSource.data();
if (items.length > 50) {
dataSource.remove(items[0]);
}
});
</script>
@(Html.Kendo().Chart<SystemMetrics>()
.Name("systemMetricsChart")
.Title("系统性能监控")
.DataSource(dataSource => dataSource
.Ajax()
.Transport(transport => transport
.Read(read => read.Action("GetSystemMetrics", "Monitoring"))
)
.ServerOperation(false)
)
.Series(series =>
{
series.Line(model => model.CpuUsage)
.Name("CPU使用率 (%)")
.Color("#e74c3c");
series.Line(model => model.MemoryUsage)
.Name("内存使用率 (%)")
.Color("#3498db");
series.Line(model => model.DiskUsage)
.Name("磁盘使用率 (%)")
.Color("#f39c12");
})
.CategoryAxis(axis => axis
.Categories(model => model.Timestamp)
.Labels(labels => labels.Format("{0:HH:mm}"))
)
.ValueAxis(axis => axis
.Numeric()
.Min(0)
.Max(100)
.Labels(labels => labels.Format("{0}%"))
)
)
<script>
$(document).ready(function() {
// 每30秒刷新一次数据
setInterval(function() {
var chart = $("#systemMetricsChart").data("kendoChart");
chart.dataSource.read();
}, 30000);
// 添加手动刷新按钮
$("#refreshButton").click(function() {
var chart = $("#systemMetricsChart").data("kendoChart");
chart.dataSource.read();
// 显示刷新动画
showRefreshAnimation();
});
});
function showRefreshAnimation() {
var chart = $("#systemMetricsChart").data("kendoChart");
// 添加加载指示器
chart.surface.draw(chart._createLoadingIndicator());
setTimeout(function() {
chart.redraw();
}, 1000);
}
</script>
@(Html.Kendo().Chart<HistoricalData>()
.Name("zoomableChart")
.Title("历史数据分析(支持缩放)")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetHistoricalData", "Chart"))
)
.Series(series =>
{
series.Line(model => model.Value)
.Name("数据值")
.Color("#3498db");
})
.CategoryAxis(axis => axis
.Categories(model => model.Date)
.Labels(labels => labels.Format("{0:yyyy-MM-dd}"))
)
.Pannable(pannable => pannable.Lock(ChartAxisLock.Y))
.Zoomable(zoomable => zoomable.MouseWheel(mouseWheel => mouseWheel.Lock(ChartAxisLock.Y)))
.Navigator(navigator => navigator
.Visible(true)
.Series(series => series.Line(model => model.Value))
)
)
@(Html.Kendo().Chart<DrillDownData>()
.Name("drillDownChart")
.Title("销售数据钻取分析")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetDrillDownData", "Chart"))
)
.Series(series =>
{
series.Column(model => model.Value)
.Name("销售额")
.Color("#3498db");
})
.CategoryAxis(axis => axis.Categories(model => model.Category))
.SeriesClick("onSeriesClick")
)
<script>
function onSeriesClick(e) {
var category = e.category;
var value = e.value;
// 弹出详细数据窗口
showDrillDownDetails(category, value);
}
function showDrillDownDetails(category, value) {
// 创建详细数据图表
$.post('/Chart/GetDrillDownDetails', { category: category }, function(data) {
$("#drillDownModal").modal('show');
$("#detailChart").kendoChart({
title: { text: category + " 详细数据" },
dataSource: data,
series: [{
type: "pie",
field: "value",
categoryField: "subcategory"
}]
});
});
}
</script>
@(Html.Kendo().Chart<ExportData>()
.Name("exportChart")
.Title("数据报表")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetReportData", "Chart"))
)
.Series(series =>
{
series.Column(model => model.Value)
.Name("数据值");
})
.CategoryAxis(axis => axis.Categories(model => model.Category))
.Pdf(pdf => pdf
.FileName("chart-report.pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Chart"))
)
)
<div class="chart-controls mt-3">
<button type="button" class="btn btn-primary" onclick="exportToPdf()">
<i class="fa fa-file-pdf"></i> 导出PDF
</button>
<button type="button" class="btn btn-success" onclick="exportToImage()">
<i class="fa fa-image"></i> 导出图片
</button>
<button type="button" class="btn btn-info" onclick="exportToSVG()">
<i class="fa fa-vector-square"></i> 导出SVG
</button>
</div>
<script>
function exportToPdf() {
var chart = $("#exportChart").data("kendoChart");
chart.exportPDF({
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm", right: "1cm", left: "1cm" }
}).done(function(data) {
saveAs(dataURItoBlob(data), "chart-report.pdf");
});
}
function exportToImage() {
var chart = $("#exportChart").data("kendoChart");
chart.exportImage({
width: 800,
height: 600
}).done(function(data) {
saveAs(dataURItoBlob(data), "chart-report.png");
});
}
function exportToSVG() {
var chart = $("#exportChart").data("kendoChart");
chart.exportSVG().done(function(data) {
var blob = new Blob([data], { type: "image/svg+xml" });
saveAs(blob, "chart-report.svg");
});
}
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
}
</script>
<div class="container-fluid">
<div class="row mb-4">
<div class="col">
<h2>销售业绩仪表板</h2>
<p class="text-muted">实时销售数据监控与分析</p>
</div>
<div class="col-auto">
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary" onclick="refreshAllCharts()">
<i class="fa fa-refresh"></i> 刷新数据
</button>
<button type="button" class="btn btn-outline-secondary" onclick="exportDashboard()">
<i class="fa fa-download"></i> 导出报告
</button>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-8">
@(Html.Kendo().Chart<MonthlySalesData>()
.Name("salesTrendChart")
.Title("月度销售趋势")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetSalesTrend", "Dashboard"))
)
.Series(series =>
{
series.Line(model => model.ActualSales)
.Name("实际销售")
.Color("#3498db")
.Width(3);
series.Line(model => model.TargetSales)
.Name("销售目标")
.Color("#e74c3c")
.DashType(ChartDashType.Dash)
.Width(2);
})
.CategoryAxis(axis => axis.Categories(model => model.Month))
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:C}"))
)
.Height(300)
)
</div>
<div class="col-md-4">
@(Html.Kendo().Chart<RegionSalesData>()
.Name("regionChart")
.Title("区域销售分布")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetRegionSales", "Dashboard"))
)
.Series(series =>
{
series.Pie(model => model.Sales, model => model.Region)
.HoleSize(40)
.Labels(labels => labels
.Visible(true)
.Template("#= category #")
);
})
.Height(300)
)
</div>
</div>
<div class="row">
<div class="col-md-6">
@(Html.Kendo().Chart<ProductPerformanceData>()
.Name("productChart")
.Title("产品销售排行")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetProductPerformance", "Dashboard"))
)
.Series(series =>
{
series.Bar(model => model.Sales)
.Name("销售额")
.Color("#2ecc71");
})
.CategoryAxis(axis => axis
.Categories(model => model.ProductName)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:C}"))
)
.Height(300)
)
</div>
<div class="col-md-6">
@(Html.Kendo().Chart<RealTimeMetrics>()
.Name("realTimeChart")
.Title("实时销售监控")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetRealTimeMetrics", "Dashboard"))
.ServerOperation(false)
)
.Series(series =>
{
series.Area(model => model.Value)
.Name("实时销售")
.Color("#9b59b6")
.Opacity(0.7);
})
.CategoryAxis(axis => axis
.Categories(model => model.Time)
.Labels(labels => labels.Format("{0:HH:mm}"))
)
.Height(300)
)
</div>
</div>
</div>
<script>
$(document).ready(function() {
// 每分钟刷新实时数据
setInterval(function() {
$("#realTimeChart").data("kendoChart").dataSource.read();
}, 60000);
});
function refreshAllCharts() {
$("#salesTrendChart").data("kendoChart").dataSource.read();
$("#regionChart").data("kendoChart").dataSource.read();
$("#productChart").data("kendoChart").dataSource.read();
$("#realTimeChart").data("kendoChart").dataSource.read();
showNotification("数据已刷新", "success");
}
function exportDashboard() {
// 导出所有图表为PDF报告
var charts = ["salesTrendChart", "regionChart", "productChart", "realTimeChart"];
var promises = [];
charts.forEach(function(chartName) {
var chart = $("#" + chartName).data("kendoChart");
promises.push(chart.exportImage());
});
Promise.all(promises).then(function(images) {
generatePDFReport(images);
});
}
function generatePDFReport(images) {
// 使用jsPDF生成报告
var doc = new jsPDF();
doc.setFontSize(20);
doc.text("销售业绩报告", 20, 30);
doc.setFontSize(12);
doc.text("生成时间: " + new Date().toLocaleString(), 20, 45);
// 添加图表图片到PDF
images.forEach(function(image, index) {
if (index > 0) doc.addPage();
doc.addImage(image, 'PNG', 10, 60, 190, 120);
});
doc.save("sales-dashboard-report.pdf");
}
function showNotification(message, type) {
// 显示通知消息
var alertClass = type === 'success' ? 'alert-success' : 'alert-info';
var alert = '<div class="alert ' + alertClass + ' alert-dismissible fade show" role="alert">' +
message +
'<button type="button" class="btn-close" data-bs-dismiss="alert"></button>' +
'</div>';
$("#notifications").html(alert);
setTimeout(function() {
$(".alert").alert('close');
}, 3000);
}
</script>
本教程全面介绍了Telerik Chart图表控件的核心功能和应用:
常见图表类型:
实时数据功能:
交互式功能:
实际应用:
通过掌握这些图表技术,您可以构建功能强大、视觉美观的数据可视化应用,有效展示业务数据,帮助用户快速理解数据趋势和做出决策。Telerik Chart的丰富功能和灵活配置使其成为企业级数据可视化的理想选择。
Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290