jQWidgets jqxChart鼠标悬停事件

以下是关于“jQWidgets jqxChart鼠标悬停事件”的完整攻略，包含两个示例说明：

简介

jqxChart 控件的鼠标悬停事件是一个非常有用的，它可以在鼠标悬停在图表上时触发。使用鼠标悬停事件，可以方便地为图表添加交互性和可性。

细攻略

以下是 jqxChart 控件鼠标悬停事件的详细攻略：

鼠标悬停事件

jqxChart 控件的鼠标悬停事件是 jqxChart 控件的一个事件，用于在鼠标悬停在图表上时触发。该事件可以用于显示有关鼠标悬停位置的信息，例如系列名称、数据点值等。

// 绑定鼠标悬停事件
$("#jqxchart").on('mousemove', function (event) {
    var xAxisValue = $("#jqxchart").jqxChart('getXAxisValue', event.clientX);
    var seriesIndex = $("#jqxchart").jqxChart('getSerieIndexAt', event.clientX, event.clientY);
    var seriesValue = $("#jqxchart").jqxChart('getDataValue', seriesIndex, xAxisValue);
    console.log('X Axis Value: ' + xAxisValue + ', Series Index: ' + seriesIndex + ', Series Value: ' + seriesValue);
});

在上述代码，我们使用 on() 方法绑定了 mousemove 事件，当鼠标悬停在图表上时触发。在事件处理程序中，我们使用 getXAxisValue() 方法获取鼠标悬停位置的 X 轴值，使用 getSerieIndexAt() 方法获取鼠标悬停位置的系列索引，使用 getDataValue() 方法获取鼠标悬停位置的系列值。

示例1

在此示例中，我们创建了一个 jqxChart 控件，并绑定了鼠标悬停事件。当鼠标悬停在图表上时，我们将显示鼠标悬停位置的系列名称和数据点值。

<div id="jqx"></div>
<script>
 $(document).ready(function () {
        // 创建 jqxChart 控件
        var sampleData = [
            { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
            { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
            { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
 { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
            { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
            { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
            { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
        ];
        var settings = {
            title: "Sales per Week",
            description: "Comparison of weekly sales.",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
            source: sampleData,
            xAxis:
            {
                dataField: 'Day',
                showGridLines: true
            },
            seriesGroups:
                [
                    {
                        type: 'column',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,
                        valueAxis:
                        {
                            minValue: 0,
                            maxValue: 100,
                            unitInterval: 10,
                            description: 'Sales in %'
                        },
                        series: [
                            { dataField: 'Keith', displayText: 'Keith' },
                            { dataField: 'Erica', displayText: 'Erica' },
                            { dataField: 'George', displayText: 'George' }
                        ]
                    }
                ]
        };
        $("#jqxchart").jqxChart(settings);
        // 绑定鼠标悬停事件
        $("#jqxchart").on('mousemove', function (event) {
            var xAxisValue = $("#jqxchart").jqxChart('getXAxisValue', event.clientX);
            var seriesIndex = $("#jqxchart").jqxChart('getSerieIndexAt', event.clientX, event.clientY);
            var seriesValue = $("#jqxchart").jqxChart('getDataValue', seriesIndex, xAxisValue);
            console.log('Series: ' + settings.seriesGroups[0].series[seriesIndex].displayText + ', Value: ' + seriesValue);
        });
    });
</script>

在上述代码中，我们创建了一个 jqxChart 控件，并绑定了鼠标悬停事件。当鼠标悬停在图表上时，我们将显示鼠标悬停位置的系列名称和数据点值。

示例2

在此示例中，我们创建了一个 jqxChart 控件，并绑定了鼠标悬停事件。当鼠标悬停在图表上时，我们将显示鼠标悬停位置的系列名称和数据点值，并使用 showToolTip() 方法显示一个工具提示。

<div id="jqxchart"></div>
<script>
 $(document).ready(function () {
        // 创建 jqxChart 控件
        var sampleData = [
            { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
            { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
            { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
            { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
            { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
            { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
            { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
        ];
        var settings = {
            title: "Sales per Week",
            description: "Comparison of weekly sales.",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
            source: sampleData,
            xAxis:
            {
                dataField: 'Day',
                showGridLines: true
            },
            seriesGroups:
                [
                    {
                        type: 'column',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,
                        valueAxis:
                        {
                            minValue: 0,
                            maxValue: 100,
                            unitInterval: 10,
                            description: 'Sales in %'
                        },
                        series: [
                            { dataField: 'Keith', displayText: 'Keith' },
                            { dataField: 'Erica', displayText: 'Erica' },
                            { dataField: 'George', displayText: 'George' }
                        ]
                    }
                ]
        };
        $("#jqxchart").jqxChart(settings);
        // 绑定鼠标悬停事件
        $("#jqxchart").on('mousemove', function (event) {
            var xAxisValue = $("#jqxchart").jqxChart('getXAxisValue', event.clientX);
            var seriesIndex = $("#jqxchart").jqxChart('getSerieIndexAt', event.clientX, event.clientY);
            var seriesValue = $("#jqxchart").jqxChart('getDataValue', seriesIndex, xAxisValue);
            var seriesName = settings.seriesGroups[0].series[seriesIndex].displayText;
            $("#jqxchart").jqxChart('showToolTip', { x: event.clientX, y: event.clientY, seriesIndex: seriesIndex, value: seriesValue, seriesName: seriesName });
        });
    });
</script>

在上述代码中，我们创建了一个 jqxChart 控件，并绑定了鼠标悬停事件。当鼠标悬停在图表上时，我们将显示鼠标悬停位置的系列名称和数据点值，并使用 showToolTip() 方法显示一个工具提示。