jqPlot 实际应用2例： 自定义渲染X坐标轴、另存为图片

近期，在项目里需要使用图表插件，所以在网上找了个jQuery的插件，jqplot，用下来，感觉非常的强大！可以显示折线图，趋势图，柱状图，饼图。官方文档也很详细，但是实际使用中，发现了2个问题，这两个问题都很好解决，只不过官方没有文档记录，所以我就用博客备忘下。

一、自定义X坐标轴渲染：

我的项目纵坐标是普通数据，横坐标是周数（即，第一周，第二周），周数太少的情况下（比如4周），jqPlot会显示0.5周,1周,1.5周,2周，也就是会出现小数。我尝试过设置ticks属性，但是在进行放大缩小之后（highlighter插件提供的功能），坐标轴就会错位，所以我就放弃了（也没有深入研究）。所以我就跟到了jqPlot代码里面，发现，原来自己写一个坐标轴渲染函数是非常简单的：

    $(document).ready(function () {

        var weekTickFormatter = function (format, val) {
            if (typeof val == 'number') {
                if ((""+val).indexOf(".") === -1 && val != 0) {
                    return "Week " + val;
                }
                return "";
            }
            else {
                return String(val);
            }
        };

        if (data != "") {
            var opt = {
                axes: {
                    xaxis: { 
                        tickOptions: { formatter: weekTickFormatter }
                    },
                },
            };

            $.jqplot('chart', data, opt);

weekTickFormatter就是我写的渲染函数，如果week number是小数，那么就什么都不显示，如果是整数，那么就显示，最终效果如下：

二、把jqPlot渲染出来的图表变成图片：

jqPlot文档里面是没有记录这个功能的，但实际上，他是实现了的，而且实际使用起来非常方便（调用jqplotToImageElem就可以了）：

<script class="code" type="text/javascript">
    $(document).ready(function () {

        var data = <%- jData %>;
        if (data != "") {
            var opt = {
                axes: {
                    xaxis: { tickOptions: { formatter: weekTickFormatter } }
                },
            };

            $.jqplot('chart', data, opt);

            $('input').click(function()
            {
                var chart = $('#chart');
                var str = chart.jqplotToImageElem({backgroundColor: chart.css('background-color')});
                $('#image').append(str);
            });
        }
    });
</script>

<input type="button" />
<div id="image"></div>
<div id="chart"></div>

相关源代码如下：

    // return the raw image data string.
    // Should work on canvas supporting browsers.
    $.fn.jqplotToImageStr = function(options) {
        var imgCanvas = $(this).jqplotToImageCanvas(options);
        if (imgCanvas) {
            return imgCanvas.toDataURL("image/png");
        }
        else {
            return null;
        }
    };

    // return a DOM <img> element and return it.
    // Should work on canvas supporting browsers.
    $.fn.jqplotToImageElem = function(options) {
        var elem = document.createElement("img");
        var str = $(this).jqplotToImageStr(options);
        elem.src = str;
        return elem;
    };

    // return a string for an <img> element and return it.
    // Should work on canvas supporting browsers.
    $.fn.jqplotToImageElemStr = function(options) {
        var str = '<img src='+$(this).jqplotToImageStr(options)+' />';
        return str;
    };

    // Not guaranteed to work, even on canvas supporting browsers due to 
    // limitations with location.href and browser support.
    $.fn.jqplotSaveImage = function() {
        var imgData = $(this).jqplotToImageStr({});
        if (imgData) {
            window.location.href = imgData.replace("image/png", "image/octet-stream");
        }

    };

    // Not guaranteed to work, even on canvas supporting browsers due to
    // limitations with window.open and arbitrary data.
    $.fn.jqplotViewImage = function() {
        var imgStr = $(this).jqplotToImageElemStr({});
        var imgData = $(this).jqplotToImageStr({});
        if (imgStr) {
            var w = window.open('');
            w.document.open("image/png");
            w.document.write(imgStr);
            w.document.close();
            w = null;
        }
    };