Highcharts gráfico de área de la curva
El siguiente ejemplo demuestra la región de la curva en la figura.
En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones. Modificar el atributo de tipo de gráfico.
configuración gráfica
El gráfico del atributo type se establece en areaspline, chart.type describe el tipo de gráfico. El valor por defecto es "línea".
var chart = {
type: 'areaspline'
};
Ejemplos
Nombre del archivo: highcharts_area_spline.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: 'areaspline'
};
var title = {
text: 'Average fruit consumption during one week'
};
var subtitle = {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
};
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: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
};
var yAxis = {
title: {
text: 'Fruit units'
}
};
var tooltip = {
shared: true,
valueSuffix: ' units'
};
var credits = {
enabled: false
}
var plotOptions = {
areaspline: {
fillOpacity: 0.5
}
};
var series= [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
La salida del ejemplo anterior es: