我想制作一个滑块,在一段时间后或单击鼠标时显示不同的图表。(就像一个图像滑块。)
怎么做??我知道一点 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);
});
}
});