しばらくしてから、またはマウスをクリックすると、さまざまなチャートが表示されるスライダーを作成したいと考えています。(画像スライダーのようなものです。)
どうやってするか？？私はjQueryを少し知っていますが、これを実装する方法がわかりません。
編集：
load イベントで 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);
});
}
});