我创建了一个使用高图表的图表。对于分页，我尝试过以下代码，但它不起作用。另外，由于我已经对系列图进行了分组，因此不确定如何过滤数据。
完整的Highchart代码：
$(function () {
Highcharts.dateFormats = {
W: function (timestamp) {
var date = new Date(timestamp),
day = date.getUTCDay() == 0 ? 7 : date.getUTCDay(),
dayNumber;
date.setDate(date.getUTCDate() + 4 - day);
dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 1, 1)) / 86400000);
return 1 + Math.floor(dayNumber / 7);
}
}
function defined(obj) {
return obj !== undefined && obj !== null;
}
var longerGridLines = function (chart) {
var d;
Highcharts.each($('.highcharts-grid')[0].children, function (p, i) {
d = p.attributes.d.value
d = d.substring(d.indexOf(' ') + 1, d.length - 1);
d = d.substring(d.indexOf(' ') + 1, d.length - 1);
p.attributes.d.value = 'M 0 ' + d;
})
},
projects = [
{ 'projectname': 'Tire Sales', 'projectstatus': 'repeat' },
{ 'projectname': 'Spark Plug', 'projectstatus': 'once' },
{ 'projectname': 'Hoods & Moff', 'projectstatus': 'once' },
{ 'projectname': 'Audio System', 'projectstatus': 'repeat' },
{ 'projectname': 'Accessories', 'projectstatus': 'once' },
];
$('#ao-projectssummry-chart').highcharts({
chart: {
type: "columnrange",
inverted: true,
marginLeft: 300,
events: {
load: function () {
longerGridLines(this);
var chart = this;
var currentMax = chart.xAxis[0].getExtremes().max;
$('.customLabel').click(function () {
Highcharts.each($('.customLabel'), function (p, i) {
$(p).removeClass('customLabelSelected');
})
$(this).addClass('customLabelSelected');
var text = this.offsetParent.innerHTML,
index = parseInt(text.substring(0, text.indexOf(' '))) - 1;
$('.cross').remove();
var xAxis = chart.xAxis[0],
distance = xAxis.toPixels(1) - xAxis.toPixels(0),
plotTop = xAxis.toPixels(index - 0.5),
width = chart.chartWidth;
chart.renderer.rect(0, plotTop, width, distance)
.attr({
fill: 'rgba(200,200,200,0.5)',
zIndex: 1
}).addClass('cross')
.add();
})
},
redraw: function () {
longerGridLines(this)
}
}
},
title: {
text: null
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
//formatter: function () {
// return '<b>' + this.categories.value + '><br/>'
//}
},
yAxis: {
title: null,
crosshair: {
width: 2,
color: "#F26C6D",
snap: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e. %b', new Date(this.x));
}
},
labels: {
format: '{value:Week %W}'
},
gridLineWidth: 1,
gridZIndex: 0,
type: 'datetime',
min: Date.UTC(2016, 1, 1),
max: Date.UTC(2016, 12, 31),
},
xAxis: {
categories: [
'Model', 'Optimize', 'Pilot', 'Deploy', 'Monitor'
],
min: 0,
max: 4,
title: null,
gridLineWidth: 1,
gridZIndex: 0,
labels: {
width: 200,
marginLeft: 0,
useHTML: true,
formatter: function () {
if(projects[this.axis.categories.indexOf(this.value)].projectstatus == "repeat") {
var projecttype = "<i class='fa fa-refresh fa-lg'></i>";
}
else {
var projecttype = '1';
}
return '<div class="ProjectListsrow"><span class="ao-projectname">' + projects[this.axis.categories.indexOf(this.value)].projectname + '</span><span class = "ao-projectstatus-label ao-' + this.value + '">' + this.value + '</span> <span class="ao-projecttype-icon">' + projecttype + ' </span> </div>'
}
},
crosshair: {
snap: true
}
},
plotOptions: {
series: {
pointWidth: 4,
borderRadius: 0,
point: {
events: {
mouseOver: function () {
$('.cross').remove();
Highcharts.each($('.customLabel'), function (p, i) {
$(p).removeClass('customLabelSelected');
})
$($('.customLabel')[this.x]).addClass('customLabelSelected')
var xAxis = this.series.xAxis,
distance = xAxis.toPixels(1) - xAxis.toPixels(0),
plotTop = xAxis.toPixels(this.x - 0.5),
width = this.series.chart.chartWidth;
this.series.chart.renderer.rect(0, plotTop, width, distance)
.attr({
fill: 'rgba(200,200,200,0.5)',
zIndex: 1
}).addClass('cross')
.add();
},
mouseOut: function () {
Highcharts.each($('.customLabel'), function (p, i) {
$(p).removeClass('customLabelSelected');
})
$('.cross').remove();
}
}
},
marker: {
enbled: false
},
groupPadding: 0.5
},
line: {
lineWidth: -1,
marker: {
enabled: true,
radius: 0,
symbol: 'circle'
}
}
},
series: aoDashboardData()
});
var stepWidth = 2
var chart = $('#ao-projectssummry-chart').highcharts();
chartlength = chart.series.length;
$('#ao-dashboard-paging-ending').click(function () {
$(".ao-loader").show();
MinAssortmentValue = Math.min.apply(Math, chartlength);
console.log(MinAssortmentValue);
setTimeout(function () {
chart.xAxis[0].setExtremes(1, MinAssortmentValue - 1);
$(".ao-loader").hide();
}, 600)
});
$('#ao-dashboard-paging-back').click(function () {
$(".ao-loader").show();
MinAssortmentValue = Math.min.apply(Math, chartlength)
var chart = $('#ao-projectssummry-chart').highcharts();
var currentMin = chart.xAxis[0].getExtremes().min;
var currentMax = chart.xAxis[0].getExtremes().max;
if (currentMin > stepWidth) {
setTimeout(function () {
chart.xAxis[0].setExtremes(currentMin - stepWidth, currentMax - stepWidth);
$(".ao-loader").hide();
}, 600)
}
if ((currentMin - MinAssortmentValue) < stepWidth) {
setTimeout(function () {
chart.xAxis[0].setExtremes(1, stepWidth);
$(".ao-loader").hide();
}, 600)
}
});
$('#ao-dashboard-paging-forward').click(function () {
$(".ao-loader").show();
MaxAssortmentValue = Math.max.apply(Math, chartlength);
MinAssortmentValue = Math.min.apply(Math, chartlength)
var chart = $('#ao-projectssummry-chart').highcharts();
var currentMin = chart.xAxis[0].getExtremes().min;
var currentMax = chart.xAxis[0].getExtremes().max;
if ((MaxAssortmentValue - currentMax) > stepWidth) {
setTimeout(function () {
chart.xAxis[0].setExtremes(currentMin + stepWidth, currentMax + stepWidth);
$(".ao-loader").hide();
}, 600)
}
if ((MaxAssortmentValue - currentMax) < stepWidth) {
setTimeout(function () {
chart.xAxis[0].setExtremes(MaxAssortmentValue + 4, MaxAssortmentValue);
$(".ao-loader").hide();
}, 600)
}
});
$('#ao-dashboard-paging-begin').click(function () {
MaxAssortmentValue = Math.max.apply(Math, chartlength);
var chart = $('#ao-projectssummry-chart').highcharts();
var currentMin = chart.xAxis[0].getExtremes().min;
var currentMax = chart.xAxis[0].getExtremes().max;
setTimeout(function () {
chart.xAxis[0].setExtremes(MaxAssortmentValue - stepWidth, MaxAssortmentValue - 1);
$(".ao-loader").hide();
}, 600)
});
});
function aoDashboardData() {
var data = [
{
data: [{
x: 0.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 0.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 0.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 0.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 0.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 0.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
]
}
]
return data;
}
使用JSFiddle：http://jsfiddle.net/sarav4gs/L4fx5mbd/4/