我有一组不规则的空数据,但我无从知晓。 有没有办法在图表上突出显示它们?
示例:http://i.stack.imgur.com/fzZ4f.jpg
我使用xAxis: {ordinal: false}
作为图表行,但我需要突出显示空点,例如:http://i.stack.imgur.com/xTZbZ.jpg
在该系列中,缺少点,并且不会收到零点。我不能设置为null。带图表的代码脚本:
// Example data:
data = [[x1,y1],[x2,y2],[x6,y6]]; // x3,x4 and x5 are missing.
function changeData(min, max) {
var chart = $('#{{div_id}}').highcharts();
chart.showLoading('Actualizando datos...');
var params = {type:'{{type}}', id: '{{id}}', from: min, to: max};
$.post("{{url('dashboardmetric')}}", {metric: 'getDataGraphMetric', params: params},
function(data) {
$.each(data, function(i, v){
chart.series[i].setData(data[i], true); //Seteo de datos de la serie
});
chart.hideLoading(); //Se libera el bloquero
}, "json");
}
$(function() {
Highcharts.setOptions({
lang: {
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
},
global: {
useUTC: false
}
});
$('#{{div_id}}').highcharts('StockChart', {
chart: {
borderColor: '#DDDDDD',
borderWidth: 1,
borderRadius: 10
},
title: {
text: '{{title}}'
},
credits: {
enabled: false
},
navigator: {//Es la serie historica y completa
adaptToUpdatedData: false,
height: 45,
series: {data: {{navigator}}}
},
scrollbar: {
liveRedraw: false
},
rangeSelector: {
buttons: [{type: 'hour', count: 6, text: '6H'},
{type: 'day', count: 1, text: '1D'},
{type: 'day', count: 2, text: '2D'},
{type: 'week', count: 1, text: '1S'},
{type: 'month',count: 1, text: '1M'},
{type: 'year', count: 1, text: '1A'},
{type: 'year', count: 2, text: '2A'},
{type: 'all',text: 'Todo'}]
},
xAxis: {
ordinal: false,
events: {
setExtremes: function(e) {
changeData(e.min, e.max);
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
marker: {
enabled: false,
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}
}
},
tooltip: {
formatter: function() {
shortMonths = new Array('Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic');
weekdays = new Array('Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado');
var date = new Date(this.x);
num_day = date.getDate();
index_weekday = date.getDay();
index_shortMonths = date.getUTCMonth();
if(date.getHours() < 10) {h = "0" + date.getHours();} else {h = date.getHours();}
if(date.getMinutes() < 10) {m = "0" + date.getMinutes();} else {m = date.getMinutes();}
var s = '<span style="font-size:10px">' + weekdays[index_weekday] + ', ' + shortMonths[index_shortMonths] + ' ' + num_day + ', ' + h + ':' + m + '</span>';
$.each(this.points, function(i, point) {
bits = point.y;
if(bits>=1000000000) {bits=(bits/1000000000).toFixed(2)+' Gb';}
else if(bits>=1000000) {bits=(bits/1000000).toFixed(2)+' Mb';}
else if(bits>=1000) {bits=(bits/1000).toFixed(2)+' Kb';}
else if(bits>1) {bits=bits+' bits';}
else if(bits==1) {bits=bits+' bit';}
else {bits='0 bits';}
serie = point.series;
s += '<br/><span style="color:'+serie.color+'">'+ serie.name +'</span>: <b>'+ bits +'</b>';
});
return s;
},
borderColor: '#FFA500',
valueDecimals: 0
{# valueSuffix: ' {{unit}}' #}
},
series: [
{% for serie in series %}
{
name: '{{serie.name | raw}}',
data: {{serie.data}},
color: '{{serie.color | raw}}',
marker: {
symbol: '{{serie.symbol | raw}}'
}
},
{% endfor %}
]
});
});