我在高图表中使用json数据作为我的图表。在这里，我还使用了具有y轴值的范围滑块。我使用grep函数来过滤提供给图表的json数据，我得到了滑块结束区域的值。并且我在grep中应用它来过滤我的json数据，以便在滑块范围变化时重绘图表。在这里，我想使用jquery小部件绑定conecpt来绑定我的过滤的json数据，以便绘制新的图表。我怎么能实现那个.. ??任何想法..我被困在那里。请帮我。并且有可能如果用户想要更改图表类型..我怎么能实现这一点...请帮助我的朋友..我怎样才能使用jquery widget绑定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>