0

我是 jqCharts 的新手。下面是数据高亮事件的代码。在鼠标悬停时显示数据。但是我需要单击图形数据参数上的值而不是鼠标悬停。下面是代码

 <script lang="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#jqChart').jqChart({
            title: "dataHighlighting Event",
            legend: { visible: false },
            animation: { duration: 1 },
            series: [
                {
                    type: 'column',
                    title: 'Column',
                    data: [['A', 46], ['B', 35], ['C', 68], ['D', 30],
                           ['E', 27], ['F', 85], ['D', 43], ['H', 29]],
                    cursor: 'pointer'
                },
                {
                    type: 'line',
                    title: 'Line',
                    data: [['A', 69], ['B', 57], ['C', 86], ['D', 23],
                           ['E', 70], ['F', 60], ['D', 88], ['H', 22]],
                    cursor: 'pointer'
                }
            ]
        });

        $('#jqChart').bind('dataHighlighting', function (e, data) {
            displayDataOptions(data);
        });
    });

    function displayDataOptions(data) {
        var list = $('#listBlock');
        list.children().remove();

        if (!data) {
            return;
        }

        list.append('<li>data.chart=' + data.chart + '</li>');
        list.append('<li>data.series=' + data.series + '</li>');
        list.append('<li>data.dataItem=[' + data.dataItem + ']</li>');
        list.append('<li>data.index=' + data.index + '</li>');
        list.append('<li>data.x=' + data.x + '</li>');
        list.append('<li>data.y=' + data.y + '</li>');
        list.append('<li>data.shape=' + data.shape + '</li>');
    }
</script>

我已经使用 onclick insted of cursor: 'pointer'。但是鼠标悬停时仍然出现数据参数。任何人都可以提供有关如何在单击 graph 值时捕获数据的帮助。

4

1 回答 1

0

我一直在这样做：

function updateChartPos(data){
    if (typeof data != 'undefined') {
      //SET YOUR GLOBAL VARIABLES
    }
  }

$('#jqchart').bind('dataHighlighting', function (e, data) {
            updateChartPos(data);
        });

$(document).on('click', 'canvas', function() {
        //Run your function with globals
});

这样做的原因是，如果您使用 jqChart 的标准数据点单击选项，用户必须直接单击数据点才能注册事件。

结合使用 dataHighlighting 绑定和画布单击侦听器，您允许用户单击图表上的任何位置，并且它将简单地使用他们悬停的最后一个数据点（这为他们提供了点击误差范围的半径）。

然后您的代码将更改为：

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#jqChart').jqChart({
            title: "dataHighlighting Event",
            legend: { visible: false },
            animation: { duration: 1 },
            series: [
                {
                    type: 'column',
                    title: 'Column',
                    data: [['A', 46], ['B', 35], ['C', 68], ['D', 30],
                           ['E', 27], ['F', 85], ['D', 43], ['H', 29]],
                    cursor: 'pointer'
                },
                {
                    type: 'line',
                    title: 'Line',
                    data: [['A', 69], ['B', 57], ['C', 86], ['D', 23],
                           ['E', 70], ['F', 60], ['D', 88], ['H', 22]],
                    cursor: 'pointer'
                }
            ]
        });

        $('#jqChart').bind('dataHighlighting', function (e, data) {
            updateChartPos(data);
        });
    });

    function updateChartPos(data) {

       window.currentInformation = data;

    }

    function displayDataOptions() {
        var data = window.currentInformation;
        var list = $('#listBlock');
        list.children().remove();

        if (!data) {
            return;
        }

        list.append('<li>data.chart=' + data.chart + '</li>');
        list.append('<li>data.series=' + data.series + '</li>');
        list.append('<li>data.dataItem=[' + data.dataItem + ']</li>');
        list.append('<li>data.index=' + data.index + '</li>');
        list.append('<li>data.x=' + data.x + '</li>');
        list.append('<li>data.y=' + data.y + '</li>');
        list.append('<li>data.shape=' + data.shape + '</li>');
    }

    $(document).on('click', 'canvas', function() {
       displayDataOptions();
    });
</script>

希望有帮助！jqChart 是一个了不起的库，自从我购买了许可证后，我就对它非常满意。如果您遇到其他问题，请查看他们的论坛 - 运行它的人对我提出的任何问题都非常好。

于 2014-10-14T15:16:40.183 回答