Javascript 如何将滑块事件后过滤的json数据绑定到highcharts中的重画小部件函数。。？_Javascript_Jquery_Html_Json_Grep

Javascript 如何将滑块事件后过滤的json数据绑定到highcharts中的重画小部件函数。。？

javascript jquery html json grep

Javascript 如何将滑块事件后过滤的json数据绑定到highcharts中的重画小部件函数。。？,javascript,jquery,html,json,grep,Javascript,Jquery,Html,Json,Grep,我将json数据用于高图表中的图表。这里我还使用了一个带有y轴值的范围滑块。我使用grep函数来过滤提供给图表的json数据，得到了slider end regions值。我在grep中应用它来过滤json数据，以便在滑块范围动态变化时重新绘制图表。在这里，我想使用jquery小部件绑定conecpt来绑定过滤后的json数据，以便绘制新图表。我怎样才能做到这一点。。？？任何想法。。我被困在那里了。请帮帮我。如果用户想要更改图表类型，则有可能。。我怎样才能做到这一点…请帮助我的朋友。。如何使用j

我将json数据用于高图表中的图表。这里我还使用了一个带有y轴值的范围滑块。我使用grep函数来过滤提供给图表的json数据，得到了slider end regions值。我在grep中应用它来过滤json数据，以便在滑块范围动态变化时重新绘制图表。在这里，我想使用jquery小部件绑定conecpt来绑定过滤后的json数据，以便绘制新图表。我怎样才能做到这一点。。？？任何想法。。我被困在那里了。请帮帮我。如果用户想要更改图表类型，则有可能。。我怎样才能做到这一点…请帮助我的朋友。。如何使用jquery小部件绑定conecpt绑定过滤后的json数据以绘制新图表

我的代码是

<html>
    <body>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js "></script>
        <div class="chart-container" id="chart-more"></div>
        <link rel="stylesheet" href="../Chart_with _slider/slider.css">
        <script src="../Chart_with _slider/jquery-1.10.2.js"></script>
        <script src="../Chart_with _slider/jquery-ui.js"></script>
        <script>
        $(document).ready(function(){
        var Report;
            Test();
        });
        function Test()
        {
            Highcharts.setOptions({
                chart: {
                    borderWidth: 5,
                    borderColor: '#e8eaeb',
                    borderRadius: 0,
                    backgroundColor: '#f7f7f7'
                },
                title: {
                    style: {
                        'fontSize': '1em'
                    },
                    useHTML: true,
                    x: -27,
                    y: 8,
                    text: 'Report'
                }
            });

            Report = [
{
    "Name": "Sam",
    "Month": "January",
    "WorkingDays": 21,
    "Attendance": 20,
    "Leave": 1
}, {
    "Name": "Sam",
    "Month": "February",
    "WorkingDays": 21,
    "Attendance": 20,
    "Leave": 1
},
{
    "Name": "Sam",
    "Month": "March",
    "WorkingDays": 21,
    "Attendance": 15,
    "Leave": 6
},
{
    "Name": "Sam",
    "Month": "April",
    "WorkingDays": 21,
    "Attendance": 19,
    "Leave": 2
},
{
    "Name": "Sam",
    "Month": "May",
    "WorkingDays": 21,
    "Attendance": 20,
    "Leave": 1
},
{
    "Name": "David",
    "Month": "January",
    "WorkingDays": 21,
    "Attendance": 21,
    "Leave": 0
},
{
    "Name": "David",
    "Month": "February",
    "WorkingDays": 21,
    "Attendance": 20,
    "Leave": 1
},
{
    "Name": "David",
    "Month": "March",
    "WorkingDays": 21,
    "Attendance": 19,
    "Leave": 2
},
{
    "Name": "David",
    "Month": "April",
    "WorkingDays": 21,
    "Attendance": 21,
    "Leave": 0
},
{
    "Name": "David",
    "Month": "May",
    "WorkingDays": 21,
    "Attendance": 21,
    "Leave": 0
},
{
    "Name": "John",
    "Month": "January",
    "WorkingDays": 21,
    "Attendance": 16,
    "Leave": 5
},
{
    "Name": "John",
    "Month": "February",
    "WorkingDays": 21,
    "Attendance": 12,
    "Leave": 9
},
{
    "Name": "John",
    "Month": "March",
    "WorkingDays": 21,
    "Attendance": 20,
    "Leave": 1
},
{
    "Name": "John",
    "Month": "April",
    "WorkingDays": 21,
    "Attendance": 15,
    "Leave": 6
},
{
    "Name": "John",
    "Month": "May",
    "WorkingDays": 21,
    "Attendance": 21,
    "Leave": 0
}
];
            var newSeriesWorkingDays = {
                name: 'WorkingDays',
                data: []
            };
            var newSeriesAttendance = {
                name: 'Attendance',
                data: []
            };
            var newSeriesLeave = {
                name: 'Leave',
                data: []
            };
            var userNames = [];
            var userNameMonths = [];
            $.each(Report, function (index, User) {debugger;
                // get the series
                newSeriesWorkingDays.data.push(User.WorkingDays);
                newSeriesAttendance.data.push(User.Attendance);
                newSeriesLeave.data.push(User.Leave);
                // Get the usernames
                if (userNames[User.Name]) {
                    if (userNames[User.Name]['months']) {
                        userNames[User.Name]['months'][User.Month] = User.Month;
                    }
                } else {
                    userNames[User.Name] = {
                        'months': []
                    };
                    userNames[User.Name]['months'][User.Month] = User.Month;
                }
            });
            var newCategories = [];
                for (var name in userNames) {
                    if (userNames.hasOwnProperty(name)) {
                        var tempObj = {}
                        tempObj.name = name;
                        tempMonths = userNames[name]['months'].sort();
                        tempObj.categories = [];
                        for (var month in tempMonths) {
                            tempObj.categories.push({
                                name: month
                            });
                        }
                        newCategories.push(tempObj);
                    }
                }

            window.chart = new Highcharts.Chart({
                chart: {
                    renderTo: "chart-more",
                    type: "column"
                },
                series: [newSeriesWorkingDays, newSeriesAttendance, newSeriesLeave],
                xAxis: {
                    categories: newCategories
                }
            });
              }
$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 30,
      values: [ 0, 30 ],
      slide: function( event, ui ) {
        var a = (  + ui.values[ 0 ]);
        var b = (  + ui.values[ 1 ]);
        //alert(a);
        //alert(b);
        //alert("The chart is being redrawn");
        var  flterData = filterDate(a, b);
        Test();
      }
    });
  });
        //slider change function
        function filterDate(a, b) {
            Report = jQuery.grep(Report, function(element, index){debugger;
            return element.WorkingDays > a && element.Attendance > a && element.Leave > a &&
                   element.WorkingDays < b && element.Attendance < b && element.Leave < b ;
             // retain appropriate elements
            });
        }
        </script>
        <div class="chart-container" id="chart-more"></div>
        <div id="slider-range"style="width:300px;border:1px solid red;">

            <br>
            <input type="text" id="startValue" readonly style="border:0; color:#f6931f; font-weight:bold;">
            <input type="text" id="endValue" readonly style="border:0; color:#f6931f; font-weight:bold;">
        </div>
    </body>
</html>


$（文档）.ready（函数（）{
var报告；
Test（）；
});
功能测试（）
{
Highcharts.setOptions({
图表：{
边框宽度：5，
边框颜色：“#e8eaeb”，
边界半径：0，
背景颜色：“#F7F7”
},
标题：{
风格：{
“fontSize”：“1em”
},
是的，
x:-27，
y:8，
文本：“报告”
}
});
报告=[
{
“姓名”：“山姆”，
“月”：“一月”，
“工作日”：21，
“出席人数”：20，
“离开”：1
}, {
“姓名”：“山姆”，
“月”：“二月”，
“工作日”：21，
“出席人数”：20，
“离开”：1
},
{
“姓名”：“山姆”，
“月”：“三月”，
“工作日”：21，
“出席人数”：15，
“离开”：6
},
{
“姓名”：“山姆”，
“月”：“四月”，
“工作日”：21，
“出席人数”：19，
“离开”：2
},
{
“姓名”：“山姆”，
“月”：“五月”，
“工作日”：21，
“出席人数”：20，
“离开”：1
},
{
“姓名”：“大卫”，
“月”：“一月”，
“工作日”：21，
“出席人数”：21，
“离开”：0
},
{
“姓名”：“大卫”，
“月”：“二月”，
“工作日”：21，
“出席人数”：20，
“离开”：1
},
{
“姓名”：“大卫”，
“月”：“三月”，
“工作日”：21，
“出席人数”：19，
“离开”：2
},
{
“姓名”：“大卫”，
“月”：“四月”，
“工作日”：21，
“出席人数”：21，
“离开”：0
},
{
“姓名”：“大卫”，
“月”：“五月”，
“工作日”：21，
“出席人数”：21，
“离开”：0
},
{
“姓名”：“约翰”，
“月”：“一月”，
“工作日”：21，
“出席人数”：16，
“离开”：5
},
{
“姓名”：“约翰”，
“月”：“二月”，
“工作日”：21，
“出席人数”：12，
“离开”：9
},
{
“姓名”：“约翰”，
“月”：“三月”，
“工作日”：21，
“出席人数”：20，
“离开”：1
},
{
“姓名”：“约翰”，
“月”：“四月”，
“工作日”：21，
“出席人数”：15，
“离开”：6
},
{
“姓名”：“约翰”，
“月”：“五月”，
“工作日”：21，
“出席人数”：21，
“离开”：0
}
];
var newSeriesWorkingDays={
名称：“工作日”，
数据：[]
};
var newSeriesAttendance={
姓名：'出席人数'，
数据：[]
};
var newserieslave={
姓名：'离开'，
数据：[]
};
var用户名=[]；
var userNameMonths=[]；
$.each（报表、函数（索引、用户）{debugger；
//获取系列
newSeriesWorkingDays.data.push（User.WorkingDays）；
新闻体验趋势。数据。推送（用户。出席）；
newserieslave.data.push（User.Leave）；
//获取用户名
if（用户名[用户名]）{
如果（用户名[用户名]['months']）{
用户名[User.Name]['months'][User.Month]=User.Month；
}
}否则{
用户名[用户名]={
“月”：[]
};
用户名[User.Name]['months'][User.Month]=User.Month；
}
});
var newCategories=[]；
for（用户名中的变量名）{
if（userNames.hasOwnProperty（name））{
var tempObj={}
tempObj.name=名称；
tempMonths=用户名[name]['months'].sort（）；
tempObj.categories=[]；
for（var月，以月为单位）{
tempObj.categories.push({
姓名：年月
});
}
newCategories.push（tempObj）；
}
}
window.chart=新的Highcharts.chart({
图表：{
renderTo：“图表更多”，
类型：“列”
},
系列：[新闻体验工作日，新闻体验趋势，新闻体验大道]，
xAxis：{
类别：新类别
}
});
}
$（函数（）{
$（“#滑块范围”）。滑块({
范围：对，
分:0,，
最高：30，
值：[0,30]，
幻灯片：功能（事件、用户界面）{
变量a=（+ui.values[0]）；
VarB=（+ui.values[1]）；
//警报（a）；
//警报（b）；
//警报（“图表正在重新绘制”）；
var flterData=过滤日期（a，b）；
Test（）；
}
});
});
//滑块切换功能
函数过滤器日期（a，b）{
Report=jQuery.grep（报表，函数（元素，索引）{debugger；
return element.WorkingDays>a&&element.Atte