Comment afficher HighCharts avec des tables

J'essaie d'afficher les données de la table à travers highcharts avec table. Mais de toute façon graphique et le tableau n'est pas afficher dans la page html. Mon code est ci-dessous. Ai-je besoin d'écrire entre <div> tag ? Si j'ai l'impression que le texte normal, il obtient l'affichage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
charts
</title>
<script src="js/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* Create the data table
*/
Highcharts.drawTable = function () {
//user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' °C';
//internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
//draw category labels
$.each( chart.xAxis[0].categories, function ( i, name ) {
renderer.text(
name,
cellLeft + cellPadding,
tableTop + ( i + 2 ) * rowHeight - cellPadding
).css( {
fontWeight: 'bold'
} ).add();
} );
$.each( series, function ( i, serie ) {
cellLeft += colWidth;
//Apply the cell text
renderer.text(
serie.name,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
).attr( {
align: 'right'
} ).css( {
fontWeight: 'bold'
} ).add();
$.each( serie.data, function ( row, point ) {
//Apply the cell text
renderer.text(
Highcharts.numberFormat( point.y, valueDecimals ) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + ( row + 2 ) * rowHeight - cellPadding
)
.attr( {
align: 'right'
} )
.add();
//horizontal lines
if ( row == 0 ) {
Highcharts.tableLine( //top
renderer,
tableLeft,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + cellPadding
);
Highcharts.tableLine( //bottom
renderer,
tableLeft,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
}
//horizontal line
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + row * rowHeight + rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + row * rowHeight + rowHeight + cellPadding
);
} );
//vertical lines
if ( i == 0 ) { //left table border
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + cellPadding,
tableLeft,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
}
Highcharts.tableLine(
renderer,
cellLeft,
tableTop + cellPadding,
cellLeft,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
if ( i == series.length - 1 ) { //right table border
Highcharts.tableLine(
renderer,
cellLeft + colWidth,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
}
} );
};
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function ( renderer, x1, y1, x2, y2 ) {
renderer.path( ['M', x1, y1, 'L', x2, y2] )
.attr( {
'stroke': 'silver',
'stroke-width': 1
} )
.add();
}
/**
* Create the chart
*/
window.chart = new Highcharts.Chart( {
chart: {
renderTo: 'container',
events: {
load: Highcharts.drawTable
},
borderWidth: 2
},
title: {
text: 'Average monthly temperatures'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
legend: {
y: -300
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
} );
</script>
</head>
<body>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-exporting.js"></script>
<div id="container" style="height: 600px;margin-top:20px;width: 600px"></div>
</body>
</html>
Vous souhaitez utiliser Highcharts avant le chargement Highcharts.js, il devrait être undefined et js moment de la compilation erreur s'est produite...

OriginalL'auteur IT_INFOhUb | 2013-01-24

  1. 3

    Vue ce jsfiddle.
    Référence de l'highcharts API sous showTable.

    L'exemple ci-dessus suffit d'ajouter cette ligne de code pour l'objet graphique.. voir le lien pour le code complet:

    exporting: {
    showTable: true
    }

    Il y a un autre exemple ici
    En référence à la highcharts FAQ - ajout de la table de données pour l'exportation graphique

    Salut, comment pourriez-vous ajouter la colonne à la table? Par exemple, la vue "ref" entre parenthèses à côté des "y" valeur : données: [{y:32093,ref:"Manager? 3;"}, {y:24064,ref:"Manager? 3;"}]

    OriginalL'auteur jasminejeane

  2. 1

    Si je suis la lecture de votre question correctement, vous voulez avoir HighCharts aussi "dessiner" une table contenant les données ainsi qu'un tableau de données dans la table.
    Si oui, jetez un oeil à ma réponse à cette question. C'est concernant la mise en forme de valeurs numériques, mais mon jsFiddle va vous montrer comment dessiner un tableau.
    Notez que la mise en forme et l'alignement de la table/tableau est difficile en fonction de la quantité de données que vous essayez de montrer.

    OriginalL'auteur wergeld