jQuery proporciona un complemento Highcharts muy moderno y altamente interactivo para que los programadores implementen gráficos para representar o comparar datos para aplicaciones web y móviles. Es multiplataforma y admite SVG.
Debe descargar los archivos necesarios en la carpeta de trabajo para que el programador pueda incluirlos en la sección principal de la página de estructura HTML tal como se implementa en los siguientes programas.
Enlace de descarga:
https://www.highcharts.com/blog/download/
Ejemplo 1: El siguiente ejemplo muestra el gráfico de barras horizontales para diferentes estados y su población mediante el uso del complemento Highcharts .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery Highcharts Plugin</title>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script src="export-data.js"></script>
<script src="accessibility.js"></script>
<style type="text/css">
body{
text-align:center;
}
.highcharts-data-table table, highcharts-figure{
min-width: 310px;
max-width: 650px;
margin: 2em auto;
}
#containerDivID{
height: 450px;
}
.highcharts-data-table table {
font-family: Arial;
border: 2px solid #e9e9e9;
margin: 10px auto;
text-align: center;
max-width: 500px;
width: 90%;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.1em;
color: #FFFF;
}
.highcharts-data-table tr:hover {
background: #bedaff;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.6em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery Highcharts Plugin</b>
<figure class="highcharts-figure">
<div id="containerDivID"></div>
<p class="highcharts-description">
Column bar charts showing population
data for various states in India.
</p>
</figure>
<script type="text/javascript">
Highcharts.chart('containerDivID', {
chart: {
type: 'bar'
},
title: {
text: 'India Population by states'
},
xAxis: {
categories: ['Karnataka', 'Telangana',
'Punjab', 'Assam', 'Orissa'],
},
yAxis: {
min: 0,
title: {
text: 'Population (lakhs)',
align: 'high'
},
},
tooltip: {
valueSuffix: 'lakhs'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -50,
y: 100,
borderWidth: 5,
backgroundColor: Highcharts.defaultOptions
.legend.backgroundColor || '#FFFFFF',
},
credits: {
enabled: false
},
series: [{
name: 'Year 2000',
data: [1107, 231, 6351, 4203, 2329]
}, {
name: 'Year 2005',
data: [1233, 1526, 1947, 1408, 1261]
}, {
name: 'Year 2010',
data: [1814, 8641, 3714, 4727, 2191]
}, {
name: 'Year 2015',
data: [1276, 1301, 4436, 6238, 2247]
}]
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra los gráficos circulares en 3D que representan el acceso a varios sitios web por parte de un solo usuario en un año en particular mediante el uso del complemento Highcharts .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery Highcharts Plugin</title>
<script src="highcharts.js"></script>
<script src="highcharts-3d.js"></script>
<script src="exporting.js"></script>
<script src="export-data.js"></script>
<script src="accessibility.js"></script>
<style type="text/css">
body{
text-align: center;
}
#containerDivID
{
height: 500px;
}
.highcharts-figure,
.highcharts-data-table table
{
min-width: 310px;
max-width: 600px;
margin: 2em auto;
}
.highcharts-data-table table
{
font-family: Arial;
border-collapse: collapse;
border: 2px solid #e9e9e9;
margin: 10px auto;
text-align: center;
width: 90%;
max-width: 550px;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption
{
padding: 0.6em;
}
.highcharts-data-table caption
{
padding: 2em 0;
font-size: 1.3em;
color: #FFFF;
}
.highcharts-data-table th
{
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table tr:hover
{
background: #f8f8f8;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even)
{
background: #ffffff;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>jQuery Highcharts Plugin</b>
<figure class="highcharts-figure">
<div id="containerDivID"></div>
<p class="highcharts-description">
This demonstrates the usage of 3D pie chart.
Select or de-select any portion from the
chart for information.
</p>
</figure>
<script type="text/javascript">
Highcharts.chart('containerDivID', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Websites accessed in 2020'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 30,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Website used',
data: [
['GeeksforGeeks', 55.0],
['NDTV', 27.5],
['youTube', 9.5],
['google', 7.2],
['Others', 1.5]
]
}]
});
</script>
</body>
</html>
Producción:
Ejemplo 3: el ejemplo anterior se puede implementar de manera similar para representar gráficos circulares de anillos en 3D al realizar cambios simples en el código jQuery de la siguiente manera. El gráfico de salida se muestra en la siguiente imagen.
<script type="text/javascript">
Highcharts.chart('containerDivID', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Information about monthly grocery'
},
subtitle: {
text: '3D donut pie charts'+
' using highcharts plugin'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Delivered amount in kgs',
data: [
['Wheat flour', 8],
['Brown Rice', 5],
['Millets', 3],
['Ragi flour', 7],
['Gram flour', 9],
['Oats', 3],
['Lentils', 4],
['Chickpeas', 2],
['Blackbeans', 6]
]
}]
});
</script>
Producción :
Todos los gráficos implementados mediante el complemento Highcharts se pueden extender al complemento HighchartTable . Con el uso de la biblioteca Highcharts, existe una forma de convertir los datos de la tabla HTML en los gráficos deseados.
Enlace de descarga para incluir los archivos requeridos en la sección principal además de los archivos del complemento Highchart .
Ejemplo 4: El siguiente ejemplo demuestra el uso muy básico del complemento HighchartTable que muestra un gráfico de columnas con los gastos mensuales.
<!DOCTYPE html>
<html>
<head>
<title>jQuery HighchartTable Plugin</title>
<meta charset="UTF-8">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="highcharts.js"></script>
<script src="jquery.highchartTable.js"></script>
<style>
body
{
font-family: Arial;
text-align:center;
}
#containerDivID{
width:550px;
height:auto;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery HighchartTable Plugin</b>
<div class="containerDivID">
<table class="highchart"
data-graph-container-before="1"
data-graph-type="column">
<thead>
<tr>
<th>Month</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>18000</td>
</tr>
<tr>
<td>February</td>
<td>15000</td>
</tr>
<tr>
<td>March</td>
<td>13000</td>
</tr>
<tr>
<td>April</td>
<td>22000</td>
</tr>
<tr>
<td>May</td>
<td>12000</td>
</tr>
<tr>
<td>June</td>
<td>12000</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('table.highchart').highchartTable();
});
</script>
</body>
</html>
Producción:
Ejemplo 5: El siguiente ejemplo muestra un gráfico de líneas utilizando el complemento HighchartTable .
<!DOCTYPE html>
<html>
<head>
<title>jQuery HighchartTable Plugin</title>
<meta charset="UTF-8" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="highcharts.js"></script>
<script src="jquery.highchartTable.js"></script>
<style>
body {
font-family: Arial;
text-align: center;
}
#containerDivID {
width: 550px;
height: auto;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>jQuery HighchartTable Plugin</b>
<div class="containerDivID">
<table class="highchart"
data-graph-container-before="1"
data-graph-type="line"
data-graph-height="310px"
data-graph-width="500px">
<caption>
This shows line graph for
monthly expense
</caption>
<thead>
<tr>
<th>Month</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>18000</td>
</tr>
<tr>
<td>February</td>
<td>15000</td>
</tr>
<tr>
<td>March</td>
<td>13000</td>
</tr>
<tr>
<td>April</td>
<td>22000</td>
</tr>
<tr>
<td>May</td>
<td>12000</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$("table.highchart").highchartTable();
});
</script>
</body>
</html>
Producción :
Ejemplo 6: El siguiente ejemplo muestra un gráfico de burbujas utilizando el complemento Highchart que representa datos en torno a 3 dimensiones. Los gráficos de burbujas generalmente trazan gráficos tomando valores x, valores y y valores z (tamaño). La x horizontal y la y vertical son ejes de valores y z representa su tamaño.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>jQuery Highcharts Plugin</title>
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<script src="exporting.js"></script>
<script src="export-data.js"></script>
<script src="accessibility.js"></script>
<style type="text/css">
body {
text-align: center;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 600px;
margin: 2em auto;
}
#containerDivID {
height: 500px;
}
.highcharts-data-table table {
font-family: Arial;
border-collapse: collapse;
border: 2px solid #e9e9e9;
margin: 10px auto;
text-align: center;
width: 90%;
max-width: 550px;
}
.highcharts-data-table caption {
padding: 2em 0;
font-size: 1.3em;
color: #ffff;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #ffffff;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>jQuery Highcharts Plugin</b>
<figure class="highcharts-figure">
<div id="containerDivID"></div>
<p class="highcharts-description">
Bubble chart showing total products with their
sales achieved and market shares in percentage.
</p>
</figure>
<script type="text/javascript">
Highcharts.chart("containerDivID", {
chart: {
type: "bubble",
plotBorderWidth: 1,
zoomType: "xy",
},
legend: {
enabled: false,
},
title: {
text: "Sales and market share of"+
" products in the market",
},
accessibility: {
point: {
valueDescriptionFormat: "{index}. {point.name}, "+
"Product count: {point.x}, "+
"Sales: Rs.{point.y}, "+
"Market share: {point.z}%.",
},
},
xAxis: {
gridLineWidth: 1,
title: {
text: "Total number of products sold",
},
labels: {
format: "{value} ",
},
plotLines: [
{
color: "black",
dashStyle: "dot",
width: 2,
value: 25,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: "arial",
},
text: "Good number of products sold",
},
zIndex: 3,
},
],
accessibility: {
rangeDescription: "Range: 20 to 30 numbers.",
},
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: "Sales achieved",
},
labels: {
format: "Rs.{value} ",
},
maxPadding: 0.2,
plotLines: [
{
color: "black",
dashStyle: "dot",
width: 2,
value: 50,
label: {
align: "right",
style: {
fontStyle: "arial",
},
text: "Good number for products sold",
x: -10,
},
zIndex: 3,
},
],
accessibility: {
rangeDescription: "Range: 0 to 60, 000 rupees.",
},
},
tooltip: {
useHTML: true,
headerFormat: "<table>",
pointFormat:
'<tr><th colspan="2">{point.product}</th></tr>' +
"<tr><th>Products sold:</th><td>{point.x}</td></tr>" +
"<tr><th>Sales achieved :</th><td>Rs.{point.y}</td></tr>" +
"<tr><th>Market share:</th><td>{point.z}%</td></tr>",
footerFormat: "</table>",
followPointer: true,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: "{point.name}",
},
},
},
series: [
{
data: [
{ x: 16, y: 5900, z: 3, name: "LB", product: "Ladies Bag" },
{ x: 14, y: 22340, z: 14.7, name: "Sh", product: "Shoes" },
{ x: 20, y: 60000, z: 15.8, name: "Mbl", product: "Mobile" },
{ x: 18, y: 23500, z: 12, name: "Bks", product: "Books" },
{ x: 22, y: 32200, z: 42, name: "SK", product: "Saving kit" },
{ x: 31, y: 55000, z: 35, name: "Cp", product: "Cooking pans" },
{ x: 17, y: 46000, z: 40, name: "MK", product: "Makeup kit" },
{ x: 37, y: 19000, z: 10, name: "Pi", product: "Piano" },
],
},
],
});
</script>
</body>
</html>
Producción:
Ejemplo 7: El siguiente ejemplo muestra gráficos de área utilizando el complemento Highcharts . Estos son similares a los gráficos de líneas, como se demostró anteriormente, con la diferencia de visualizar los datos en volúmenes.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>Highcharts Example</title>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script src="export-data.js"></script>
<script src="accessibility.js"></script>
<style type="text/css">
body {
text-align: center;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 600px;
margin: 2em auto;
}
#containerDivID {
height: 500px;
}
.highcharts-data-table table {
font-family: Arial;
border-collapse: collapse;
border: 2px solid #e9e9e9;
margin: 10px auto;
text-align: center;
width: 90%;
max-width: 550px;
}
.highcharts-data-table caption {
padding: 2em 0;
font-size: 1.3em;
color: #ffff;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #ffffff;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>jQuery Highcharts Plugin</b>
<figure class="highcharts-figure">
<div id="containerDivID"></div>
<p class="highcharts-description">
It demonstrates the basic area chart
showing men and women working strength .
</p>
</figure>
<script type="text/javascript">
Highcharts.chart("containerDivID", {
chart: {
type: "area",
},
accessibility: {
description: "Image description: An area chart compares"+
" the working strength of the men and women"+
" between 1950 and 2020. The number men or "+
" women are plotted on the Y-axis and the "+
" years on the X-axis. ",
},
title: {
text: "Men and Women work force",
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value;
},
},
accessibility: {
rangeDescription: "Years between : 1950 to 2020.",
},
},
yAxis: {
title: {
text: "Working strength",
},
labels: {
formatter: function () {
return this.value / 1000 + "k";
},
},
},
tooltip: {
pointFormat: "{series.name} reached {point.y:, .0f}"+
" in numbers in year {point.x}",
},
plotOptions: {
area: {
pointStart: 1950,
marker: {
enabled: false,
symbol: "circle",
radius: 2,
states: {
hover: {
enabled: true,
},
},
},
},
},
series: [
{
name: "men",
data: [
null,
null,
17,
12,
17,
13,
21,
14,
16,
19,
32,
21,
35,
25,
25,
55,
125,
155,
215,
427,
655,
852,
1160,
1617,
1478,
1321,
2138,
4221,
4512,
4502,
4502,
4500,
4501,
5502,
6229,
7189,
8139,
9199,
10538,
18517,
12527,
10475,
11421,
10358,
10295,
10104,
12610,
12401,
11643,
13092,
14478,
15915,
17385,
19055,
21215,
23210,
22010,
23044,
25393,
27935,
21000,
26000,
29000,
28010,
29020,
27010,
25000,
24000,
31982,
32040,
31233,
39197,
45000,
],
},
{
name: "women",
data: [
null,
null,
11,
12,
22,
23,
24,
27,
28,
32,
27,
45,
67,
78,
86,
92,
112,
201,
250,
289,
369,
621,
1005,
1436,
2063,
3057,
4618,
5113,
5113,
4954,
4804,
4761,
4717,
4368,
4218,
6444,
9914,
9620,
9326,
9822,
15468,
18020,
17020,
16020,
15507,
14062,
12787,
13287,
14747,
13076,
12551,
12144,
11009,
10950,
10871,
11004,
14304,
23464,
24314,
23086,
22380,
21434,
24126,
27387,
29459,
31056,
29224,
27342,
26662,
26926,
27912,
28909,
28905,
27826,
25079,
25702,
24826,
24605,
30062,
32049,
33852,
35804,
37000,
35020,
33011,
31008,
37431,
43000,
41000,
39000,
],
},
],
});
</script>
</body>
</html>
Producción:
Hay muchos tipos de gráficos más hermosos en el complemento. Los programadores pueden explorar e implementar según los requisitos de la aplicación.
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA