jqplot を使用してブラウザで時系列データを視覚化したいと考えています。私の問題は、x 軸の値が重なって読み取れないことです。
そのため、ズーム機能は非常に便利です。しかし、うまくいきません。
フィドルを見てください。Firefoxでは実行されず、Google Chromeでのみ実行されます。
http://jsbin.com/onufih/9/edit
これが私のコードです:
function getTicks() {
var ticks = [];
for (var i = 0; i < data.length; i++) {
var item = data[i];
var dateStr = item[0];
ticks.push(dateStr);
}
return ticks;
}
var overviewChart = $.jqplot('overviewChart', [data], {
title: 'Rotated Axis Text',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
},
ticks: getTicks(),
tickOptions: {
formatString: '%#m/%#d/%y - %#H h - %#M m - %#S s',
fontSize: '10pt',
fontFamily: 'Tahoma',
angle: -40
}
},
yaxis: {
rendererOptions: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
},
tickOptions: {
fontSize: '10pt',
fontFamily: 'Tahoma',
angle: 30
}
}
},
series: [{
lineWidth: 4,
markerOptions: {
style: 'square'
}
}],
cursor: {
zoom: true,
looseZoom: true
}
});
}