组件/图表/的热图

ASP。NET Core HeatMap概述

Telerik UI HeatMap TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI HeatMap widget.

HeatMap使用颜色来表示二维数据点的相对值。热图图适用于在二维上可视化一个值的大小。

Telerik UI for ASP。网络核心Ninja image
新的Telerik UI为ASP。网络核心?

Telerik UI for ASP。网络核心是一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

要查看组件的运行情况，请检查示例:

基本配置

下面的示例演示如何定义HeatMap。

@ (Html.Kendo () .Chart () . name(“热图”).Title(“源控制的贡献在过去的12周”).Series(系列= >{系列。的热图(new object[] { new {Week = 1, Day = "Mon", Value = 8}, new {Week = 1, Day = "Tue", Value = 4}, new {Week = 1, Day = "Wed", Value = 7}, new {Week = 1, Day = "Thu", Value = 14}, new {Week = 1, Day = "Fri", Value = 10}, new {Week = 1, Day = "Sat", Value = 0}, new {Week = 1, Day = "Sun", Value = 0}, new {Week = 2, Day = "Mon", Value = 6}, new {Week = 2, Day = "Tue", Value = 6}, new {Week = 2, Day = "Wed", Value = 9}, new {Week = 2, Day = "Thu", Value = 12}, new {Week = 2, Day = "Fri", Value = 12}, new {Week = 2, Day = "Sat", Value = 3}, new {Week = 2, Day = "Sun", Value = 0}, new {Week = 3, Day = "Mon", Value = 5}, new {Week = 3, Day = "Tue", Value = 5}, new {Week = 3, Day = "Wed", Value = 8}, new {Week = 3, Day = "Thu", Value = 11}, new {Week = 3, Day = "Fri", Value = 0}, new {Week = 3, Day = "Sat", Value = 1}, new {Week = 3, Day = "Sun", Value = 0}, new {Week = 4, Day = "Mon", Value = 0}, new {Week = 4, Day = "Tue", Value = 0}, new {Week = 4, Day = "Wed", Value = 0}, new {Week = 4, Day = "Thu", Value = 0}, new {Week = 4, Day = "Fri", Value = 0}, new {Week = 4, Day = "Sat", Value = 0}, new {Week = 4, Day = "Sun", Value = 0}, new {Week = 5, Day = "Mon", Value = 9}, new {Week = 5, Day = "Tue", Value = 0}, new {Week = 5, Day = "Wed", Value = 0}, new {Week = 5, Day = "Thu", Value = 0}, new {Week = 5, Day = "Fri", Value = 0}, new {Week = 5, Day = "Sat", Value = 0}, new {Week = 5, Day = "Sun", Value = 0}, new {Week = 6, Day = "Mon", Value = 6}, new {Week = 6, Day = "Tue", Value = 4}, new {Week = 6, Day = "Wed", Value = 7}, new {Week = 6, Day = "Thu", Value = 14}, new {Week = 6, Day = "Fri", Value = 10}, new {Week = 6, Day = "Sat", Value = 2}, new {Week = 6, Day = "Sun", Value = 0}, new {Week = 7, Day = "Mon", Value = 4}, new {Week = 7, Day = "Tue", Value = 6}, new {Week = 7, Day = "Wed", Value = 9}, new {Week = 7, Day = "Thu", Value = 2}, new {Week = 7, Day = "Fri", Value = 4}, new {Week = 7, Day = "Sat", Value = 0}, new {Week = 7, Day = "Sun", Value = 0}, new {Week = 8, Day = "Mon", Value = 11}, new {Week = 8, Day = "Tue", Value = 4}, new {Week = 8, Day = "Wed", Value = 7}, new {Week = 8, Day = "Thu", Value = 14}, new {Week = 8, Day = "Fri", Value = 10}, new {Week = 8, Day = "Sat", Value = 0}, new {Week = 8, Day = "Sun", Value = 0}, new {Week = 9, Day = "Mon", Value = 5}, new {Week = 9, Day = "Tue", Value = 4}, new {Week = 9, Day = "Wed", Value = 7}, new {Week = 9, Day = "Thu", Value = 4}, new {Week = 9, Day = "Fri", Value = 1}, new {Week = 9, Day = "Sat", Value = 0}, new {Week = 9, Day = "Sun", Value = 0}, new {Week = 10, Day = "Mon", Value = 3}, new {Week = 10, Day = "Tue", Value = 6}, new {Week = 10, Day = "Wed", Value = 9}, new {Week = 10, Day = "Thu", Value = 12}, new {Week = 10, Day = "Fri", Value = 12}, new {Week = 10, Day = "Sat", Value = 4}, new {Week = 10, Day = "Sun", Value = 0}, new {Week = 11, Day = "Mon", Value = 1}, new {Week = 11, Day = "Tue", Value = 4}, new {Week = 11, Day = "Wed", Value = 7}, new {Week = 11, Day = "Thu", Value = 10}, new {Week = 11, Day = "Fri", Value = 10}, new {Week = 11, Day = "Sat", Value = 0}, new {Week = 11, Day = "Sun", Value = 0}, new {Week = 12, Day = "Mon", Value = 0}, new {Week = 12, Day = "Tue", Value = 4}, new {Week = 12, Day = "Wed", Value = 7}, new {Week = 12, Day = "Thu", Value = 8}, new {Week = 12, Day = "Fri", Value = 10}, new {Week = 12, Day = "Sat", Value = 0}, new {Week = 12, Day = "Sun", Value = 0} }).xField("Week").yField("Day").Field("Value"); }) .Tooltip(t => t.Visible(true).Template("#:value.value# contributions on #:value.y#, week #:value.x#")) .XAxis(x=>x .Numeric() .Labels(l=>l.Template("Week #:value#").Rotation(45)) ) .YAxis(y=>y .Categories(new[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}) ) )
@addTagHelper *，剑道。Mvc @ {var类别= new string[]{“我”、“星期二”、“结婚”、“清华”、“星期五”,“坐”,“太阳”};var data =新对象[]{新{星期= 1,天=“星期一”,价值= 8},新{星期= 1,天=“星期二”,价值= 4},新{星期= 1,天=“结婚”,价值= 7},新{星期= 1,天=“清华”,价值= 14},新{星期= 1,天=“星期五”,价值= 10},新{星期= 1,天=“坐”,值= 0},新{星期= 1,天=“太阳”,值= 0},新{星期= 2,天=“星期一”,价值= 6},新{星期= 2,天=“星期二”,价值= 6},新{星期= 2,天=“结婚”,价值= 9},新{星期= 2,天=“清华”,价值= 12},{新周= 2,天=“星期五”,新价值= 12},{星期= 2,天=“坐”,值= 3},新{星期= 2,天=“太阳”,值= 0},新{星期= 3,天=“星期一”,价值= 5},新{星期= 3,天=“星期二”,价值= 5},新{星期= 3,天=“结婚”,价值= 8},新{星期= 3,天=“清华”,价值= 11},新{星期= 3,天=“星期五”,值= 0},新{星期= 3,天=“坐”,价值= 1},新{星期= 3,天=“太阳”,值= 0},新{星期= 4,天=“星期一”,值= 0},新{星期= 4,天= "星期二" Value = 0},新{星期= 4,天=“结婚”,值= 0},新{星期= 4,天=“清华”,值= 0},新{星期= 4,天=“星期五”,值= 0},新{星期= 4,天=“坐”,值= 0},新{星期= 4,天=“太阳”,值= 0},新{星期= 5,天=“星期一”,价值= 9},新{星期= 5,天=“星期二”,值= 0},新{星期= 5,天=“结婚”,值= 0},新{星期= 5,天=“清华”,值= 0},新{星期= 5,天=“星期五”,值= 0},新{星期= 5,天=“坐”,值= 0},新{星期= 5,天=“太阳”,值= 0},新{星期= 6,天=“星期一”,价值= 6},{新星期= 6,天= "星期二" Value = 4},新{星期= 6,天=“结婚”,价值= 7},新{星期= 6,天=“清华”,价值= 14},新{星期= 6,天=“星期五”,价值= 10},新{星期= 6,天=“坐”,价值= 2},新{星期= 6,天=“太阳”,值= 0},新{星期= 7,天=“星期一”,价值= 4},新{星期= 7,天= "星期二" Value = 6},新{星期= 7,天=“结婚”,价值= 9},新{星期= 7,天=“清华”,价值= 2},新{星期= 7,天=“星期五”,价值= 4},新{星期= 7,天=“坐”,值= 0},{新周= 7天=“太阳”,值= 0},{星期= 8,天=“星期一”,价值= 11},新{星期= 8,天=“星期二”,价值= 4},新{星期= 8,天=“结婚”,价值= 7},新{星期= 8,天=“清华”,价值= 14},新{星期= 8,天=“星期五”,价值= 10},新{星期= 8,天=“坐”,值= 0},新{星期= 8,天=“太阳”,值= 0},新{星期= 9天=“星期一”,价值= 5},新{星期= 9天=“星期二”,价值= 4},新{星期= 9天=“结婚”,价值= 7},新{星期= 9天=“清华”,价值= 4},新{星期= 9天=“星期五”,价值= 1},新{星期= 9天=“坐”,值= 0},新{星期= 9,天=“太阳”,值= 0},新{星期= 10,天=“星期一”,值= 3},新{星期= 10,天=“星期二”,价值= 6},新{星期= 10,天=“结婚”,价值= 9},新{星期= 10,天=“清华”,价值= 12},新{星期= 10,天=“星期五”,价值= 12},新{星期= 10,天=“坐”,价值= 4},新{星期= 10,天=“太阳”,值= 0},新{星期= 11,天=“星期一”,价值= 1},新{星期= 11,天=“星期二”,价值= 4},新{星期= 11,天=“结婚”,价值= 7},新{星期= 11天=“清华”,价值= 10},新{星期= 11,天=“星期五”,价值= 10},新{星期= 11,天=“坐”,值= 0},新{星期= 11,天=“太阳”,值= 0},新{星期= 12,天=“星期一”,值= 0},新{星期= 12,天=“星期二”,价值= 4},新{星期= 12,天=“结婚”,价值= 7},新{星期= 12,天=“清华”,价值= 8},新{星期= 12,天=“星期五”,价值= 10},新{星期= 12,天=“坐”,值= 0},新{星期= 12,天=“太阳”,值= 0}};}

事件

你可以订阅所有的HeatMap事件．

按处理程序名称处理事件

下面的示例演示如何通过处理程序名称订阅事件。

@(Html.Kendo().Chart() .Name("heatmap") //其他配置。events (events => events .DataBound("onDataBound"))))
@addTagHelper *，剑道。Mvc