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

ツールチップやラインにシャドウをつけるなどカスタマイズが豊富な、グラフやチャートを描画する高性能なスクリプト「jqPlot」を紹介します。

デモにはツールチップやシャドウの他にもたくさんのグラフやチャートがあり、簡単なスクリプトで実装することができます。。

ツールチップのデモ

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
    }
});

シャドウのデモ

Shadows Option

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
    }]
});

jqPlotはjQueryのプラグインのため、実装にはjquery.jsが必要です。

対応ブラウザはIE6/7/8, Fx, Op, Safariとのことです。