可以在高级图表中对图表类型进行分组。？
我有json个数据，我想用图表类型表达。还有范围滑块。我需要提供一个选项来选择最终用户的图表类型。我有一个下拉列表，当用户选择应显示相应图表类型的选项时，我会在其中填充一些图表类型，如bar,pie,line等。这可能与highchart有关吗？
小提琴：http://jsfiddle.net/rahulsankarer/BqHLz/
Highcharts.setOptions({
chart: {
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: 'Report'
}
});
var blogComments = [
{
"Name": "John",
"Month": "Jan",
"TotalWorkingDay": 12,
"Attendance": 1,
"Leave": 1
}, {
"Name": "John",
"Month": "Feb",
"TotalWorkingDay": 8,
"Attendance": 2,
"Leave": 1
},
{
"Name": "John",
"Month": "March",
"TotalWorkingDay": 10,
"Attendance": 0,
"Leave": 0
},
{
"Name": "John",
"Month": "April",
"TotalWorkingDay": 11,
"Attendance": 0,
"Leave": 0
},
{
"Name": "John",
"Month": "May",
"TotalWorkingDay": 8,
"Attendance": 0,
"Leave": 1
},
{
"Name": "David",
"Month": "Jan",
"TotalWorkingDay": 8,
"Attendance": 2,
"Leave": 3
},
{
"Name": "David",
"Month": "Feb",
"TotalWorkingDay": 5,
"Attendance": 1,
"Leave": 0
},
{
"Name": "David",
"Month": "March",
"TotalWorkingDay": 4,
"Attendance": 2,
"Leave": 0
},
{
"Name": "David",
"Month": "April",
"TotalWorkingDay": 1,
"Attendance": 1,
"Leave": 0
},
{
"Name": "David",
"Month": "May",
"TotalWorkingDay": 8,
"Attendance": 2,
"Leave": 0
},
{
"Name": "Sam",
"Month": "Jan",
"TotalWorkingDay": 7,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "Feb",
"TotalWorkingDay": 6,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "March",
"TotalWorkingDay": 11,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "April",
"TotalWorkingDay": 9,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "May",
"TotalWorkingDay": 2,
"Attendance": 0,
"Leave": 0
}
];
var newSeriesTotalWorkingDay = {
name: 'TotalWorkingDay',
data: []
};
var newSeriesAttendance = {
name: 'Attendance',
data: []
};
var newSeriesLeave = {
name: 'Leave',
data: []
};
var userNames = [];
var userNameMonths = [];
$.each(blogComments, function (index, User) {
// get the series
newSeriesTotalWorkingDay.data.push(User.TotalWorkingDay);
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;
}
});
//console.log(userNames);
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: [newSeriesTotalWorkingDay, newSeriesAttendance, newSeriesLeave],
xAxis: {
categories: newCategories
}
});
<div>
<label>Select Chart Type :</label>
<select>
<option value="line">Line</option>
<option value="area">Area</option>
<option value="bar">Bar</option>
<option value="audi">Audi</option>
</select>
</div>
答案 0 :(得分：0)
演示：http://jsfiddle.net/robschmuecker/Umx5X/
在此，我演示了如何在图片上同时收听select更改事件和click，以动态更改图表type。
$(document).ready(function () {
var initialChartType = 'area';
$('#top10_update').val(initialChartType);
var chartSelector = '#top10';
function changeChartType(myType) {
$(chartSelector).highcharts().series[0].update({
type: myType
});
}
$('#top10_update').on('change', function () {
var type = $(this).val();
changeChartType(type);
});
$('.set-chart').on('click', function () {
var type = $(this).data('chart-type');
changeChartType(type);
});
$(chartSelector).highcharts({
chart: {
type: initialChartType,
margin: [50, 50, 100, 80]
},
title: {
text: 'TOP10'
},
subtitle: {
text: ' '
},
credits: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Ilość'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
'Ilość: ' + this.y;
}
},
series: [{
name: 'Ilość zgłoszeń, TOP10',
data: [1, 2, 3, 43],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
function ajax_update(date) {
$.ajax({
url: "index.php/ajax",
async: false,
method: 'post',
dataType: "json",
data: {
date: date
},
beforeSend: function () {
$('#loading').show();
$('#top10').highcharts().showLoading();
},
success: function (dane) {
$('#top10').highcharts().xAxis[0].setCategories(dane.top10.xlabel, false);
$('#top10').highcharts().series[0].setData(dane.top10.data);
$('#top10').highcharts().setTitle(null, {
text: 'Dane za: ' + date.replace('^', ' - ')
});
$('#top10').highcharts().hideLoading();
$('#loading').hide();
},
error: function (dane) {
alert(dane.responseText);
}
});
}
});
答案 1 :(得分：0)