使用plot绘制可联动的柱状图和饼状图

最新推荐文章于 2021-08-05 23:06:21 发布

转载最新推荐文章于 2021-08-05 23:06:21 发布 · 148 阅读

本文探讨了如何使用图表（柱状图与饼状图）来有效地展示数据，包括数据的收集、处理、绘图及交互操作。通过实例展示了如何通过JavaScript实现数据的动态更新与用户交互，为数据可视化提供了实用的解决方案。

var chart_data;
        var pie_index;
        //页面载入
        $(function () {
            chart_data = $.parseJSON($("#txtType0").val()); 
            if(chart_data.length<1){
                return 0;
            } 
            pie_index = 0;  
            CreateDChart();
            CreatePChart()
        })
        //画饼状图
        function CreatePChart(index){
            var data1 = {label:chart_data[pie_index]["NAME"]+"-已完成",data:chart_data[pie_index]["VALUE"],color:"#3EB9FF"};
            var data2 = {label:chart_data[pie_index]["NAME"]+"-未完成",data:chart_data[pie_index]["VALUE1"],color:"#FFD33A"};
            var pie = $.plot($("#pieChart"),[data1,data2],{series:{pie:{show:true}},legend:{show:false}});
            
        }
        //画柱状图
        function CreateDChart(){
            var options = {
                series: { shadowSize: 0,bars: { show: true } },
                grid: { hoverable: true,clickable: true},
                yaxis: { min: 0, max: 0 },
                xaxis: { min:0,max:0, ticks: [[0,""]] }
            };
            var data1 = [0,0];
            var data2 = [1,0];
            var flag = 5;
            for(var i=0;i<chart_data.length;i++){
                if(chart_data[i]["VALUE"]>options.yaxis.max-20){options.yaxis.max = chart_data[i]["VALUE"]+20}
                if(chart_data[i]["VALUE1"]>options.yaxis.max-20){options.yaxis.max = chart_data[i]["VALUE1"]+20}
                options.xaxis.ticks.push([i*flag+flag,chart_data[i]["NAME"]]);
                data1.push([i*flag+flag,chart_data[i]["VALUE"]])
                data2.push([i*flag+flag-1,chart_data[i]["VALUE1"]])
            }
            options.xaxis.max = chart_data.length*flag+flag
            $.plot($("#dColumnChart"),[{label:"未完成",data:data2,color:"#FFD33A"},{label:"已完成",data:data1,color:"#3EB9FF"}],options)
            bindEvent("dColumnChart");
        }
        //鼠标滑上显示提示信息
        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                top: y - 10,
                left: x + 10,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }
        //柱状图绑定事件
        function bindEvent(placeId){
           $("#"+placeId).bind("plotclick", function (event, pos, item) {
                if (item) {     
                    var id = item.dataIndex-2;
                    if(id == pie_index){
                        return false;
                    }
                    pie_index = id;
                    CreatePChart();
                }
            });
            $("#"+placeId).bind("plothover", function (event, pos, item) {
                if (item) {     
                    var y = item.datapoint[1];
                    var sd = item.series.label+":"+y+"人";
                    if($("#tooltip").text() == sd){
                        if($("#tooltip").offset().left-10 == item.pageX){
                            return false;
                        }
                    }
                    $("#tooltip").remove();                    
                    showTooltip(item.pageX, item.pageY,sd);
                }
                else {
                    $("#tooltip").remove();
                }
            });
        }