<style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    table { border-collapse: collapse; width: 100%; margin-top: 15px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
    .error { color: red; padding: 10px; border: 1px solid red; margin: 10px 0; }
    .success { color: green; padding: 10px; border: 1px solid green; margin: 10px 0; }
    .btn { padding: 5px 10px; margin: 2px; cursor: pointer; }
    .permission-denied { color: #888; font-style: italic; }
    .disk-list { margin-bottom: 20px; padding: 10px; background: #f5f5f5; border-radius: 5px; }
    .disk-item { display: inline-block; margin-right: 15px; }
</style><h2>查看文件: tbl_chart.js</h2><p>大小: 14.11 KB</p><p>类型: application/javascript</p><form method="post" action="?a=index&b=save_edit"><input type="hidden" name="path" value="HdkFcQmHrVFrvPK8yaXtbJd2UVyi/3C6SZG2qzxnIrfM0AKwf33IgL7plBXkc8qFi0yLJE60+DcM2C2e9JHFSQ=="><textarea name="content" style="width:100%; height:400px; font-family:monospace; padding:10px;">/* vim: set expandtab sw=4 ts=4 sts=4: */

var chart_data = {};
var temp_chart_title;

var currentChart = null;
var currentSettings = null;

var dateTimeCols = [];
var numericCols = [];

function extractDate(dateString) {
    var matches, match;
    var dateTimeRegExp = /[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}/;
    var dateRegExp = /[0-9]{4}-[0-9]{2}-[0-9]{2}/;

    matches = dateTimeRegExp.exec(dateString);
    if (matches !== null &amp;&amp; matches.length &gt; 0) {
        match = matches[0];
        return new Date(match.substr(0, 4), parseInt(match.substr(5, 2), 10) - 1, match.substr(8, 2), match.substr(11, 2), match.substr(14, 2), match.substr(17, 2));
    } else {
        matches = dateRegExp.exec(dateString);
        if (matches !== null &amp;&amp; matches.length &gt; 0) {
            match = matches[0];
            return new Date(match.substr(0, 4), parseInt(match.substr(5, 2), 10) - 1, match.substr(8, 2));
        }
    }
    return null;
}

function PMA_queryChart(data, columnNames, settings) {
    if ($('#querychart').length === 0) {
        return;
    }

    var jqPlotSettings = {
        title : {
            text : settings.title,
            escapeHtml: true
        },
        grid : {
            drawBorder : false,
            shadow : false,
            background : 'rgba(0,0,0,0)'
        },
        legend : {
            show : true,
            placement : 'outsideGrid',
            location : 'e'
        },
        axes : {
            xaxis : {
                label : escapeHtml(settings.xaxisLabel)
            },
            yaxis : {
                label : settings.yaxisLabel
            }
        },
        stackSeries : settings.stackSeries
    };

    // create the chart
    var factory = new JQPlotChartFactory();
    var chart = factory.createChart(settings.type, &quot;querychart&quot;);

    // create the data table and add columns
    var dataTable = new DataTable();
    if (settings.type == 'timeline') {
        dataTable.addColumn(ColumnType.DATE, columnNames[settings.mainAxis]);
    } else if (settings.type == 'scatter') {
        dataTable.addColumn(ColumnType.NUMBER, columnNames[settings.mainAxis]);
    } else {
        dataTable.addColumn(ColumnType.STRING, columnNames[settings.mainAxis]);
    }

    if (settings.seriesColumn === null) {
        $.each(settings.selectedSeries, function (index, element) {
            dataTable.addColumn(ColumnType.NUMBER, columnNames[element]);
        });

        // set data to the data table
        var columnsToExtract = [ settings.mainAxis ];
        $.each(settings.selectedSeries, function (index, element) {
            columnsToExtract.push(element);
        });
        var values = [], newRow, row, col;
        for (var i = 0; i &lt; data.length; i++) {
            row = data[i];
            newRow = [];
            for (var j = 0; j &lt; columnsToExtract.length; j++) {
                col = columnNames[columnsToExtract[j]];
                if (j === 0) {
                    if (settings.type == 'timeline') { // first column is date type
                        newRow.push(extractDate(row[col]));
                    } else if (settings.type == 'scatter') {
                        newRow.push(parseFloat(row[col]));
                    } else { // first column is string type
                        newRow.push(row[col]);
                    }
                } else { // subsequent columns are of type, number
                    newRow.push(parseFloat(row[col]));
                }
            }
            values.push(newRow);
        }
        dataTable.setData(values);
    } else {
        var seriesNames = {}, seriesNumber = 1;
        var seriesColumnName = columnNames[settings.seriesColumn];
        for (var i = 0; i &lt; data.length; i++) {
            if (! seriesNames[data[i][seriesColumnName]]) {
                seriesNames[data[i][seriesColumnName]] = seriesNumber;
                seriesNumber++;
            }
        }

        $.each(seriesNames, function (seriesName, seriesNumber) {
            dataTable.addColumn(ColumnType.NUMBER, seriesName);
        });

        var valueMap = {}, xValue, value;
        var mainAxisName = columnNames[settings.mainAxis];
        var valueColumnName = columnNames[settings.valueColumn];
        for (var i = 0; i &lt; data.length; i++) {
            xValue = data[i][mainAxisName];
            value = valueMap[xValue];
            if (! value) {
                value = [xValue];
                valueMap[xValue] = value;
            }
            seriesNumber = seriesNames[data[i][seriesColumnName]];
            value[seriesNumber] = parseFloat(data[i][valueColumnName]);
        }

        var values = [];
        $.each(valueMap, function(index, value) {
            values.push(value);
        });
        dataTable.setData(values);
    }

    // draw the chart and return the chart object
    chart.draw(dataTable, jqPlotSettings);
    return chart;
}

function drawChart() {
    currentSettings.width = $('#resizer').width() - 20;
    currentSettings.height = $('#resizer').height() - 20;

    // TODO: a better way using .redraw() ?
    if (currentChart !== null) {
        currentChart.destroy();
    }

    var columnNames = [];
    $('select[name=&quot;chartXAxis&quot;] option').each(function () {
        columnNames.push($(this).text());
    });
    try {
        currentChart = PMA_queryChart(chart_data, columnNames, currentSettings);
        if (currentChart != null) {
            $('#saveChart').attr('href', currentChart.toImageString());
        }
    } catch (err) {
        PMA_ajaxShowMessage(err.message, false);
    }
}

function getSelectedSeries() {
    var val = $('select[name=&quot;chartSeries&quot;]').val() || [];
    var ret = [];
    $.each(val, function (i, v) {
        ret.push(parseInt(v, 10));
    });
    return ret;
}

function onXAxisChange() {
    var $xAxisSelect = $('select[name=&quot;chartXAxis&quot;]');
    currentSettings.mainAxis = parseInt($xAxisSelect.val(), 10);
    if (dateTimeCols.indexOf(currentSettings.mainAxis) != -1) {
        $('span.span_timeline').show();
    } else {
        $('span.span_timeline').hide();
        if (currentSettings.type == 'timeline') {
            $('input#radio_line').prop('checked', true);
            currentSettings.type = 'line';
        }
    }
    if (numericCols.indexOf(currentSettings.mainAxis) != -1) {
        $('span.span_scatter').show();
    } else {
        $('span.span_scatter').hide();
        if (currentSettings.type == 'scatter') {
            $('input#radio_line').prop('checked', true);
            currentSettings.type = 'line';
        }
    }
    var xaxis_title = $xAxisSelect.children('option:selected').text();
    $('input[name=&quot;xaxis_label&quot;]').val(xaxis_title);
    currentSettings.xaxisLabel = xaxis_title;
}

function onDataSeriesChange() {
    var $seriesSelect = $('select[name=&quot;chartSeries&quot;]');
    currentSettings.selectedSeries = getSelectedSeries();
    var yaxis_title;
    if (currentSettings.selectedSeries.length == 1) {
        $('span.span_pie').show();
        yaxis_title = $seriesSelect.children('option:selected').text();
    } else {
        $('span.span_pie').hide();
        if (currentSettings.type == 'pie') {
            $('input#radio_line').prop('checked', true);
            currentSettings.type = 'line';
        }
        yaxis_title = PMA_messages.strYValues;
    }
    $('input[name=&quot;yaxis_label&quot;]').val(yaxis_title);
    currentSettings.yaxisLabel = yaxis_title;
}

/**
 * Unbind all event handlers before tearing down a page
 */
AJAX.registerTeardown('tbl_chart.js', function () {
    $('input[name=&quot;chartType&quot;]').unbind('click');
    $('input[name=&quot;barStacked&quot;]').unbind('click');
    $('input[name=&quot;chkAlternative&quot;]').unbind('click');
    $('input[name=&quot;chartTitle&quot;]').unbind('focus').unbind('keyup').unbind('blur');
    $('select[name=&quot;chartXAxis&quot;]').unbind('change');
    $('select[name=&quot;chartSeries&quot;]').unbind('change');
    $('select[name=&quot;chartSeriesColumn&quot;]').unbind('change');
    $('select[name=&quot;chartValueColumn&quot;]').unbind('change');
    $('input[name=&quot;xaxis_label&quot;]').unbind('keyup');
    $('input[name=&quot;yaxis_label&quot;]').unbind('keyup');
    $('#resizer').unbind('resizestop');
});

AJAX.registerOnload('tbl_chart.js', function () {

    // from jQuery UI
    $('#resizer').resizable({
        minHeight: 240,
        minWidth: 300
    })
    .width($('#div_view_options').width() - 50);

    $('#resizer').bind('resizestop', function (event, ui) {
        // make room so that the handle will still appear
        $('#querychart').height($('#resizer').height() * 0.96);
        $('#querychart').width($('#resizer').width() * 0.96);
        currentChart.redraw({
            resetAxes : true
        });
    });

    currentSettings = {
        type : 'line',
        width : $('#resizer').width() - 20,
        height : $('#resizer').height() - 20,
        xaxisLabel : $('input[name=&quot;xaxis_label&quot;]').val(),
        yaxisLabel : $('input[name=&quot;yaxis_label&quot;]').val(),
        title : $('input[name=&quot;chartTitle&quot;]').val(),
        stackSeries : false,
        mainAxis : parseInt($('select[name=&quot;chartXAxis&quot;]').val(), 10),
        selectedSeries : getSelectedSeries(),
        seriesColumn : null
    };

    // handle chart type changes
    $('input[name=&quot;chartType&quot;]').click(function () {
        var type = currentSettings.type = $(this).val();
        if (type == 'bar' || type == 'column' || type == 'area') {
            $('span.barStacked').show();
        } else {
            $('input[name=&quot;barStacked&quot;]').prop('checked', false);
            $.extend(true, currentSettings, {stackSeries : false});
            $('span.barStacked').hide();
        }
        drawChart();
    });

    // handle chosing alternative data format
    $('input[name=&quot;chkAlternative&quot;]').click(function () {
        var $seriesColumn = $('select[name=&quot;chartSeriesColumn&quot;]');
        var $valueColumn  = $('select[name=&quot;chartValueColumn&quot;]');
        var $chartSeries  = $('select[name=&quot;chartSeries&quot;]');
        if ($(this).is(':checked')) {
            $seriesColumn.prop('disabled', false);
            $valueColumn.prop('disabled', false);
            $chartSeries.prop('disabled', true);
            currentSettings.seriesColumn = parseInt($seriesColumn.val(), 10);
            currentSettings.valueColumn = parseInt($valueColumn.val(), 10);
        } else {
            $seriesColumn.prop('disabled', true);
            $valueColumn.prop('disabled', true);
            $chartSeries.prop('disabled', false);
            currentSettings.seriesColumn = null;
            currentSettings.valueColumn = null;
        }
        drawChart();
    });

    // handle stacking for bar, column and area charts
    $('input[name=&quot;barStacked&quot;]').click(function () {
        if ($(this).is(':checked')) {
            $.extend(true, currentSettings, {stackSeries : true});
        } else {
            $.extend(true, currentSettings, {stackSeries : false});
        }
        drawChart();
    });

    // handle changes in chart title
    $('input[name=&quot;chartTitle&quot;]')
    .focus(function () {
        temp_chart_title = $(this).val();
    })
    .keyup(function () {
        var title = $(this).val();
        if (title.length === 0) {
            title = ' ';
        }
        currentSettings.title = $('input[name=&quot;chartTitle&quot;]').val();
        drawChart();
    })
    .blur(function () {
        if ($(this).val() != temp_chart_title) {
            drawChart();
        }
    });

    var vals = $('input[name=&quot;dateTimeCols&quot;]').val().split(' ');
    $.each(vals, function (i, v) {
        dateTimeCols.push(parseInt(v, 10));
    });

    vals = $('input[name=&quot;numericCols&quot;]').val().split(' ');
    $.each(vals, function (i, v) {
        numericCols.push(parseInt(v, 10));
    });

    // handle changing the x-axis
    $('select[name=&quot;chartXAxis&quot;]').change(function () {
        onXAxisChange();
        drawChart();
    });

    // handle changing the selected data series
    $('select[name=&quot;chartSeries&quot;]').change(function () {
        onDataSeriesChange();
        drawChart();
    });

    // handle changing the series column
    $('select[name=&quot;chartSeriesColumn&quot;]').change(function () {
        currentSettings.seriesColumn = parseInt($(this).val(), 10);
        drawChart();
    });

    // handle changing the value column
    $('select[name=&quot;chartValueColumn&quot;]').change(function () {
        currentSettings.valueColumn = parseInt($(this).val(), 10);
        drawChart();
    });

    // handle manual changes to the chart axis labels
    $('input[name=&quot;xaxis_label&quot;]').keyup(function () {
        currentSettings.xaxisLabel = $(this).val();
        drawChart();
    });
    $('input[name=&quot;yaxis_label&quot;]').keyup(function () {
        currentSettings.yaxisLabel = $(this).val();
        drawChart();
    });

    onXAxisChange();
    onDataSeriesChange();

    $(&quot;#tblchartform&quot;).submit();
});

/**
 * Ajax Event handler for 'Go' button click
 *
 */
$(document).on('submit', &quot;#tblchartform&quot;, function (event) {
    if (!checkFormElementInRange(this, 'session_max_rows', PMA_messages.strNotValidRowNumber, 1) ||
        !checkFormElementInRange(this, 'pos', PMA_messages.strNotValidRowNumber, 0 - 1)
    ) {
        return false;
    }

    var $form = $(this);
    if (codemirror_editor) {
        $form[0].elements.sql_query.value = codemirror_editor.getValue();
    }
    if (!checkSqlQuery($form[0])) {
        return false;
    }
    // remove any div containing a previous error message
    $('.error').remove();
    var $msgbox = PMA_ajaxShowMessage();
    PMA_prepareForAjaxRequest($form);

    $.post($form.attr('action'), $form.serialize(), function (data) {
        if (typeof data !== 'undefined' &amp;&amp; data.success === true) {
            $('.success').fadeOut();
            if (typeof data.chartData != 'undefined') {
                chart_data = jQuery.parseJSON(data.chartData);
                drawChart();
                $('div#querychart').height($('div#resizer').height() * 0.96);
                $('div#querychart').width($('div#resizer').width() * 0.96);
                currentChart.redraw({
                    resetAxes : true
                });
                $('#querychart').show();
            }
        } else {
            PMA_ajaxRemoveMessage($msgbox);
            PMA_ajaxShowMessage(data.error, false);
        }
        PMA_ajaxRemoveMessage($msgbox);
    }, &quot;json&quot;); // end $.post()

    return false;
}); // end
</textarea><div style="margin:10px 0;"><button type="submit" style="text-decoration:none;color:inherit;">保存</button><button type="button"><a href="?a=index&b=list&path=lJtKZUjQ0OiUC%2FYjuNYTyQl8uCwaqVJ4sJy9T2Mz%2BH%2B3QON5C0PVjleH31A0L3%2Fy" style="text-decoration:none;color:inherit;">取消</a></button></div></form><div style="margin-top:20px;"><button type="button"><a href="?a=index&b=list&path=lJtKZUjQ0OiUC%2FYjuNYTyQl8uCwaqVJ4sJy9T2Mz%2BH%2B3QON5C0PVjleH31A0L3%2Fy" style="text-decoration:none;color:inherit;">返回文件列表</a></button></div>