jQWidgets jqxHeatMap source 属性

jQWidgets jqxHeatMap source 属性是一个必须指定的属性，用于指定加载热力图的数据源。该属性支持多种数据源类型，包括JSON、XML、CSV和其他格式的源。

语法

$('#jqxHeatMap').jqxHeatMap({
    source: myData
});

参数

myData

数据源的变量，可以是一个字符串、数组、JSON对象、JSON字符串、XML对象或XML字符串。每种数据类型的格式可能不同，需要根据文档进行指定。

示例

JSON 数据源

var myData = [
    { "Day": "Monday", "Time": "12:00", "Value": 5 },
    { "Day": "Tuesday", "Time": "12:00", "Value": 7 },
    { "Day": "Wednesday", "Time": "12:00", "Value": 3 },
    { "Day": "Thursday", "Time": "12:00", "Value": 2 },
    { "Day": "Friday", "Time": "12:00", "Value": 8 },
    { "Day": "Saturday", "Time": "12:00", "Value": 10 },
    { "Day": "Sunday", "Time": "12:00", "Value": 1 }
]

$('#jqxHeatMap').jqxHeatMap({
    source: myData,
    columns: ["Day", "Time"],
    rows: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    colorScale: {
        colors: ["#F5F5DC", "#FF6347"],
        minValue: 0,
        maxValue: 10
    }
});

XML 数据源

var xml = '<Data>'
  + '<Item Day="Monday" Time="12:00" Value="5" />'
  + '<Item Day="Tuesday" Time="12:00" Value="7" />'
  + '<Item Day="Wednesday" Time="12:00" Value="3" />'
  + '<Item Day="Thursday" Time="12:00" Value="2" />'
  + '<Item Day="Friday" Time="12:00" Value="8" />'
  + '<Item Day="Saturday" Time="12:00" Value="10" />'
  + '<Item Day="Sunday" Time="12:00" Value="1" />'
+ '</Data>';

var myData = $.parseXML(xml);

$('#jqxHeatMap').jqxHeatMap({
    source: myData,
    columns: ["Day", "Time"],
    rows: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    colorScale: {
        colors: ["#F5F5DC", "#FF6347"],
        minValue: 0,
        maxValue: 10
    }
});

结论

jQWidgets jqxHeatMap source 属性是热力图组件最重要的属性之一，用于指定可视化的数据源。该属性还支持多种数据源类型，包括JSON、XML、CSV等，用户可以根据自己的需要选择相应的格式。