adminLTE使用中遇到的难点

修改form缩放展开图标

---

<script>
    // 在引入js之前更改配置
    var AdminLTEOptions = {
        boxWidgetOptions: {
            boxWidgetIcons: {
                //Collapse icon
                collapse: 'fa-angle-down',
                //Open icon
                open: 'fa-angle-right',
                //Remove icon
                remove: 'fa-times'
            },
            boxWidgetSelectors: {
                //Remove button selector
                remove: '[data-widget="remove"]',
                //Collapse button selector
                collapse: '[data-widget="collapse"]'
            }
        }
    };
</script>
<script src="<%=basePath%>/adminlte/dist/js/app.js"></script>
<script src="<%=basePath%>/adminlte/dist/js/app.min.js"></script>

结合chart.js，显示图标，导出图片

---

chart.js 不提供任何方法来导出成图片格式。但是因为 chart.js 使用 Canvas 画布来构建图表，因此可以使用 Canvas 画布的功能来输出图表到图片。

<a id="link1" download="CHARTJS.jpg" class="btn btn-default btn-xs"><i class="fa fa-share-square-o "></i>&nbsp;导出</a>
<div class="chart">
    <canvas id="lineChart" style="height:250px"></canvas>
</div>

<script>

    $(function () {
        var lineChartData = {
            labels: ${hours},
            datasets: [
                {
                    label: "test1",
                    fillColor: "rgba(210, 214, 222, 1)",
                    strokeColor: "rgba(210, 214, 222, 1)",
                    pointColor: "rgba(210, 214, 222, 1)",
                    pointStrokeColor: "#c1c7d1",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: ${inCarNums}
                }
            ]
        };

        var lineChartOptions = {
            // 省略一些配置
            onAnimationComplete: done  // calls function done() {} at end 重点
        };

        //-------------
        //- LINE CHART -
        //--------------
        var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
        var lineChart = new Chart(lineChartCanvas);
        lineChart.Line(lineChartData, lineChartOptions);

    });

    function done(){
        var url_base64jp = document.getElementById("lineChart").toDataURL("image/jpg");
        $("#link1").attr("href", url_base64jp);
    }
</script>

参考

Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
将 Chart.js 生成的图表导出成图片