[JS]カスタマイズが豊富なグラフやチャートを描画するスクリプト -jqPlot

Post on:2009年6月4日

ツールチップのデモ

<textarea name="code" class="js" cols="60" rows="5">
line1 = [['23-May-08',578.55],['20-Jun-08',566.5],['25-Jul-08',480.88],['22-Aug-08',509.84]];
line1.push(['26-Sep-08',454.13],['24-Oct-08',379.75],['21-Nov-08',303],['26-Dec-08',308.56]);
line1.push(['23-Jan-09',299.14],['20-Feb-09',346.51],['20-Mar-09',325.99],['24-Apr-09',386.15]);
plot1 = $.jqplot('chart2',[line1],{
    title: 'Data Point Highlighting',
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            rendererOptions: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer
            },
            tickOptions: {
                formatString: '%b %#d, %Y',
                fontSize: '10pt',
                fontFamily: 'Tahoma',
                angle: -30
            }
        },
        yaxis: {
            tickOptions: {
                formatString: '$%.2f'
            }
        }
    },
    highlighter: {
        sizeAdjust: 7.5
    },
    cursor: {
        show: false
    }
});
</textarea>

line1 = [['23-May-08',578.55],['20-Jun-08',566.5],['25-Jul-08',480.88],['22-Aug-08',509.84]];

line1.push(['26-Sep-08',454.13],['24-Oct-08',379.75],['21-Nov-08',303],['26-Dec-08',308.56]);

line1.push(['23-Jan-09',299.14],['20-Feb-09',346.51],['20-Mar-09',325.99],['24-Apr-09',386.15]);

plot1 = $.jqplot('chart2',[line1],{

title: 'Data Point Highlighting',

axes: {

xaxis: {

renderer: $.jqplot.DateAxisRenderer,

rendererOptions: {

tickRenderer: $.jqplot.CanvasAxisTickRenderer

tickOptions: {

formatString: '%b %#d, %Y',

fontSize: '10pt',

fontFamily: 'Tahoma',

angle: -30

}

yaxis: {

tickOptions: {

formatString: '$%.2f'

}

highlighter: {

sizeAdjust: 7.5

cursor: {

show: false

}

});

</textarea>

シャドウのデモ

Shadows Option

<textarea name="code" class="js" cols="60" rows="5">
var cosPoints = [];
for (var i = 0; i < 2 * Math.PI; i += 0.1) {
    cosPoints.push([i, Math.cos(i)]);
}
plot1b = $.jqplot('chart3', [cosPoints], {
    title: 'Shadow Options',
    series: [{
        showMarker: false,
        lineWidth: 5,
        shadowAngle: 0,
        shadowOffset: 2,
        shadowAlpha: .06,
        shadowDepth: 5
    }]
});
</textarea>