1

我想制作一个滑块,在一段时间后或单击鼠标时显示不同的图表。(就像一个图像滑块。)

怎么做??我知道一点 jQuery,但我不知道如何实现它。

编辑:

我正在尝试在加载事件上使用 setInterval 方法。

但是,当我从 xml 文件中提取数据时,我的代码不起作用。但是,如果我放置显式值而不是 xml 文件,代码将完全按照我的意愿工作。我在这里粘贴我的代码。

$(document).ready(function($) {

    makeChart('data1.xml');


    function makeChart(file) {

        var options = {

            chart: {
                renderTo: 'container',
                type: '',
                events: {
                    load: function() {

                        // set up the updating of the chart each second                            
                        setInterval(function() {

                            makeChart('data2.xml');
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'}]
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                }
            },

            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Units'
                }
            },

            series: []

        };

        $.get(file, function(xml) {

            // Split the lines
            var $xml = $(xml);

            options.chart.type = ($xml.find('type').text());

            // push categories
            $xml.find('categories item').each(function(i, category) {
                options.xAxis.categories.push($(category).text());
            });

            // push series
            $xml.find('series').each(function(i, series) {
                var seriesOptions = {
                    name: $(series).find('name').text(),
                    data: []
                };

                // push data points
                $(series).find('data point').each(function(i, point) {
                    seriesOptions.data.push(
                    parseInt($(point).text()));
                });

                // add it to the options
                options.series.push(seriesOptions);
            });
            var chart = new Highcharts.Chart(options);
        });

    }
});​
4

1 回答 1

1

我建议您阅读以下内容:

setTimeout()- 一段时间后运行幻灯片

.click()- 当您单击某个选择器时运行的事件

animate()- 如果你想让你的滑块流畅地工作

css: left,right,top,bottom- 您可以更改此属性animate以制作幻灯片效果

css: position: absolute- 在您想要滑动的元素上

css: position: relative, overflow:hidden- 在滑块中包含您的元素的元素上。

我认为这对你有帮助。您还可以在 google 中找到更多滑块示例。只是搜索。

祝你好运 ;)

于 2012-07-04T08:19:06.157 回答