Highcharts valeurs manquantes Plan de la zone
Highcharts Plan de la zone
L'exemple suivant illustre la perte de valeur de la zone à la Fig.
Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations. Ajouter des propriétés spacingBottom dans le tableau.
configuration graphique
Le tableau de la propriété spacingBottom est réglé sur 30. Intervalle représente l'intervalle entre les graphiques.
var chart = {
type: 'area',
spacingBottom: 30
};
Exemples
Nom du fichier: highcharts_area_missing.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'area',
spacingBottom: 30
};
var title = {
text: 'Fruit consumption *'
};
var subtitle = {
text: '* Jane\'s banana consumption is unknown',
floating: true,
align: 'right',
verticalAlign: 'bottom',
y: 15
};
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
};
var xAxis = {
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
};
var yAxis = {
title: {
text: 'Y-Axis'
},
labels: {
formatter: function () {
return this.value;
}
}
};
var tooltip = {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
};
var plotOptions = {
area: {
fillOpacity: 0.5
}
};
var credits = {
enabled: false
};
var series= [{
name: 'John',
data: [0, 1, 4, 4, 5, 2, 3, 7]
}, {
name: 'Jane',
data: [1, 0, 3, null, 3, 1, 2, 1]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
L'exemple ci-dessus sortie est:
Highcharts Plan de la zone