jQWidgets jqxChart mouseover 事件

介绍

jQWidgets是一个jQuery插件集合，包含了很多UI组件和图表控件，其中jqxChart是一个能够生成多种类型的图表控件。

mouseover事件指鼠标悬停在图表元素上时触发，该事件在jqxChart中也得到了支持。

使用方法

可以使用on函数为jqxChart控件添加mouseover事件：

$('#jqxChart').on('mouseover', function (event) {
    // 处理mouseover事件
});

在事件处理函数中，可以通过event参数获取鼠标位置和事件源对象：

$('#jqxChart').on('mouseover', function (event) {
    var x = event.clientX;
    var y = event.clientY;
    var target = event.target;
    // 处理mouseover事件
});

示例

下面是一个生成柱形图的例子，当鼠标悬停在柱形图上时会弹出提示框：

$(document).ready(function () {
    // 准备数据
    var source = [
        {Year: '2005', Sales: 2345},
        {Year: '2006', Sales: 2456},
        {Year: '2007', Sales: 4576},
        {Year: '2008', Sales: 6354},
        {Year: '2009', Sales: 7854},
        {Year: '2010', Sales: 8956},
        {Year: '2011', Sales: 10234},
        {Year: '2012', Sales: 12345},
        {Year: '2013', Sales: 14356},
        {Year: '2014', Sales: 16543},
        {Year: '2015', Sales: 18765},
        {Year: '2016', Sales: 20987},
        {Year: '2017', Sales: 23456}
    ];
    // 创建柱形图
    var chart = $('#chartContainer').jqxChart({
        title: {text: '年销售额'},
        description: {text: '单位：百万元'},
        enableAnimations: true,
        showLegend: true,
        padding: {left: 10, top: 5, right: 10, bottom: 5},
        titlePadding: {left: 50, top: 0, right: 0, bottom: 10},
        source: source,
        xAxis: {
            dataField: 'Year',
            tickMarks: {visible: true},
            unitInterval: 1,
            axisSize: 'auto'
        },
        valueAxis: {
            unitInterval: 2000,
            minValue: 0,
            maxValue: 25000,
            title: {text: '销售额（万元）'},
            tickMarks: {visible: true}
        },
        seriesGroups: [{
            type: 'column',
            columnsGapPercent: 50,
            seriesGapPercent: 0,
            series: [{
                dataField: 'Sales',
                displayText: '销售额',
                labels: {
                    visible: true,
                    formatFunction: function (value) {
                        return parseInt(value / 10000) + '万元';
                    }
                }
            }]
        }]
    });
    // 鼠标悬停事件
    $('#chartContainer').on('mouseover', function (event) {
        var x = event.clientX;
        var y = event.clientY;
        var target = event.target;
        if (target.nodeName == 'rect') {
            var index = target.getAttribute('data-value-axis-line');
            var item = source[index];
            var sales = item.Sales / 10000;
            var year = item.Year;
            $('#tip').html(year + '年销售额：' + sales.toFixed(2) + '万元');
            $('#tip').css('top', y + 10);
            $('#tip').css('left', x + 10);
            $('#tip').show();
        } else {
            $('#tip').hide();
        }
    });
});

其中tip为一个div元素用于显示提示信息。

结束语

以上便是jQWidgets jqxChart mouseover事件的介绍。在图表中使用mouseover事件可以为用户提供更好的交互体验，增强产品的用户体验。