eachars報表折線圖通用方法

  報表通用格式(eachar,highchars)通用

第一步,先將需要展示的數據封裝成下面方式

數據格式爲:
[
    { 
      "xAxis":"所有科室",
      "yAxis":[
           {"name":"報修量","value":"100"},
           {"name":"完修量","value":"50"},
           {"name":"維修總費用","value":"15"},
           {"name":"緊急單數","value":"2"},
           {"name":"維修總工時","value":"56"}
         ]
    },{ 
      "xAxis":"急診科",
      "yAxis":[
           {"name":"報修量","value":"130"},
           {"name":"完修量","value":"20"},
           {"name":"維修總費用","value":"10"},
           {"name":"緊急單數","value":"2"},
           {"name":"維修總工時","value":"53"}
         ]
    }
]

第二步,在將上面的數據封裝成插件需要的格式

//得到折線圖
function getComunLine(){
    var dataJSON = getLineObj(); //得到上面的數據JSON,

    var xAxis = [];  //報表的x軸  xAxis
    var yAxis = [];   //報表的y軸  series

	//封裝X軸值
	for(var i=0;i<dataJSON.length;i++){
		xAxis.push(dataJSON[i].xAxis); //對應X軸值
	}

	//封裝Y軸值
    var index = 0;
    for(var i = 0;i < dataJSON[0].yAxis.length; i++){   //每一次的第一列的數量和名稱都是固定的
        var scz = {};
		scz.name = dataJSON[0].yAxis[index].name;
        scz.type = 'line';
        scz.stack = '總量';

        //封裝Y軸值
        var da = [];
        for(var j = 0; j < xAxis.length; j++){  //2
            if(dataJSON[j].yAxis[index]){
                da.push(Number(dataJSON[j].yAxis[index].value));  //值
            }else{
                da.push(0);   //沒有值的補充爲 0
            }
        }

        scz.data = da;
        yAxis.push(scz); //對應y軸值

        index++;//當前索引加 1
    }

    //調用折線圖方法  第一個參數,div顯示的容器,第二個是title,第三個是X軸,第四個是Y軸
    eachatsReport('container',"維修報表統計",xAxis,yAxis); 
}

第三步,調用插件方法即可

function eachatsReport(container,title,xAxis,yAxis){
    //添加折現圖
    Highcharts.chart(container, {
        chart: {
            type: 'line'
        },
        title: {
            text:title
        },
        xAxis: {
            //categories: ['admin','賴*蕾', '周*明', '倪*強', '高*巍','朱明']
            categories: xAxis
        },
        yAxis: {
            title: {
                text: 'value',
                style: {
                    color: '#006400',
                    fontSize : '14px'
                }
            }
        },
        credits:{enabled:false},
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true,          // 開啓數據標籤
                    formatter: function() {
                        return this.y + '' ;
                    }
                },
                enableMouseTracking: true // 關閉鼠標跟蹤,對應的提示框、點擊事件會失效
            }
        },
        // series:[{
        //     name: 'admin',
        //     data: [43934, 52503, 57177, 69658, 97031,48]
        // }, {
        //     name: '賴*蕾',
        //     data: [24916, 24064, 29742, 29851, 32490,95]
        // }, {
        //     name: '周*明',
        //     data: [11744, 17722, 16005, 19771, 20185,62]
        // }, {
        //     name: '倪*強',
        //     data: [78,0, 7988, 12169, 15112,4825]
        // }, {
        //     name: '高*巍',
        //     data: [12908, 5948, 8105, 11248, 8989,682]
        // },{
        //     name: '朱明',
        //     data: [12908, 5948, 8105, 11248, 8989,682
        // }]
        series:yAxis
    });
}

 效果:由於是數據關係,所以這裏效果圖就不實際展示了,

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章