当前位置 : 主页 > 网页制作 > Dojo >

dojo笔记

来源:互联网 收集:自由互联 发布时间:2021-06-15
-- 曲线图 var labels = ["x1",“x2”,“x3”,“x4”,“x5”,“x6”]; var series = [1,2,3,4,5,6,]; var initUsageChartChart = function(labels, series){ var userChart = new dojox.charting.Chart("Usage_Chart"); userChart.addAxis("x",

-- 曲线图

var labels = ["x1",“x2”,“x3”,“x4”,“x5”,“x6”];

var series = [1,2,3,4,5,6,];

var initUsageChartChart = function(labels, series){

    var userChart = new dojox.charting.Chart("Usage_Chart");
    
    userChart.addAxis("x", {
        labels: labels,
        majorTick: { color: "black", length: 2 }, //X轴大刻度的颜色、长度
        minorTick: { stroke: "black", length: 2},//X轴小刻度的颜色、长度
        rotation: 45
    });
    
    userChart.addAxis("y", {
        vertical: true,
        fixLower : "major",
        fixUpper : "major"
    });
    
    userChart.addPlot("default", {
        type: "Lines",
        markers : true,
    });

    

    // 填充数据

    userChart.addSeries("Usage Line", series, { stroke: "blue", fill: "white" });

   

    // 添加特效

    new dojox.charting.widget.Legend(userChart, "legend");
    new dojox.charting.action2d.Magnify(userChart, "default");
    new dojox.charting.action2d.Tooltip(userChart, "default");


     // 渲染

    userChart.render();

};


-- 画柱状图

var createColumnChart = function(){
    columnChart = new dojox.charting.Chart("usage_chart");

    // 增加x轴
    columnChart.addAxis("x", {
        labels: labels
    });
        
    //增加Y轴,也不需要显示
    columnChart.addAxis("y", {
        vertical : true,
        fixLower : "major",
        fixUpper : "major"
    });
    
    //定义图标类型,这里是柱状图
    columnChart.addPlot("default",{
        type : "StackedColumns",
        markers : true,
        gap : 10,
        animate: { duration: 3000 }
    });


    columnChart.addSeries(“column”, series,{ stroke: { color: "blue", width: 2 }, fill: "blue" });
                 
    //渲染
    columnChart.render();


    new dojox.charting.action2d.Tooltip(columnChart, "default");
    new dojox.charting.action2d.Highlight(columnChart, "default");
    new dojox.charting.action2d.Shake(columnChart, "default", {shiftY: 0});
};

-- Grid

var initEvidenceListStore = function() {
    evidenceListStore = new dojox.data.QueryReadStore({
        url : "/meter/doListEvidence.action",
        clearOnClose : true
    });
};

/**
 * Initialize the Evidence grid.
 */
var initEvidenceList = function() {
    // Initialize it's store first.
    initEvidenceListStore();
    
    evidenceListGrid = new dojox.grid.EnhancedGrid({
        id : 'evidenceListGrid',
        store : evidenceListStore,
        //rowSelector : '40px',
        structure : [ [ {
            name : "展示在grid的name",
            field : "store里的value",
            width: "20%"
        } ] ],
        plugins : {
            pagination : {
                pageSizes : [ "25", "50", "100" ],
                description : true,
                itemTitle: "Evidence",
                sizeSwitch : true,
                pageStepper : true,
                gotoButton : true,
                /*page step to be displayed*/
                maxPageStep : 5,
                /*position of the pagination bar*/
                position : "bottom"
            },

            // 全选框
            indirectSelection : {
                headerSelector : true,
                width : "20px",
                styles : "text-align: center;"
            }
        }
    }, document.createElement('div'));

    /*append the new grid to the div*/
    dojo.byId("Grid").appendChild(evidenceListGrid.domNode);

    /*Call startup() to render the grid*/
    evidenceListGrid.startup();
};


var selCount = evidenceListGrid.selection.getSelectedCount();  // grid选中几行

var selectedItems = detectListGrid.selection.getSelected();  // grid获取选中行的数据

dojo.forEach(selectedItems, function(selectedItem) {             spid = detectListGrid.store.getValues(selectedItem, "spId");  });

网友评论