J'essaye de construire le graphique en utilisant Chart.Js. Ce chart.js a une option par défaut pour les info-bulles, je veux créer une option d’infos. Y a-t-il un moyen de le rendre possible?
Voici mon code
var chart = null;
barChart: function (data1, data2, data3, label) {
var data = {
labels: label,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: data1
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: data2
},
{
fillColor: "rgba(0,255,0,0.3)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(0,255,0,0.3)",
data: data3
},
]
}
var cht = document.getElementById('exampleCanvas');
var ctx = cht.getContext('2d');
if (chart)
chart.destroy();
chart = new Chart(ctx).Bar(data);
}
Essaye ça:
Vous pouvez apporter des modifications globales en utilisant ce code:
Chart.defaults.global = {
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",
// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip label font size in pixels
tooltipFontSize: 14,
// String - Tooltip font weight style
tooltipFontStyle: "normal",
// String - Tooltip label font colour
tooltipFontColor: "#fff",
// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,
// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",
// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",
// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,
// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,
// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,
// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,
// Number - Pixel offset from point x to tooltip Edge
tooltipXOffset: 10,
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
// String - Template string for single tooltips
multiTooltipTemplate: "<%= value %>",
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}
Utilisez ceci Link pour référence
J'ai utilisé ceci, je l'ai trouvé sur stackoverflow, mais j'essaie difficilement de le retrouver.
<div id="chartjs-tooltip"></div>
var chartoptions =
{
customTooltips: function ( tooltip )
{
var tooltipEl = $( "#chartjs-tooltip" );
if ( !tooltip )
{
tooltipEl.css( {
opacity: 0
} );
return;
}
tooltipEl.removeClass( 'above below' );
tooltipEl.addClass( tooltip.yAlign );
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split( ":" );
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html( innerHtml );
tooltipEl.css( {
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle
} );
}
}
Lien vers l'endroit où je l'ai eu: Chart.js: changement de modèle d'info-bulle
C'est très simple quand vous savez où mettre l'option.
La réponse consiste à ajouter l'option personnalisée lors de la création du graphique:
chart = new Chart(ctx).Bar(data, {"options goes here"} );
Après avoir passé la variable de données avec les informations de données, vous pouvez ajouter des options personnalisées. Par exemple, vous souhaitez modifier la taille du titre de l'info-bulle et vous souhaitez également définir une couleur gris clair dans le titre de l'info-bulle que vous souhaitez modifier quelque chose comme ca:
chart = new Chart(ctx).Bar(data, {
//Option for title font size in pixels
tooltipTitleFontSize: 14,
//Option for tooltip title color
tooltipTitleFontColor: "#eee",
});
Vous pouvez également créer un jeu d’options en tant que variable à des fins d’organisation et pouvoir le réutiliser.
//Create a set of relevant options for you chart
var myoptions = {
scaleShowGridLines : false,
responsive : true,
scaleFontSize: 12,
pointDotRadius : 4,
scaleFontStyle: 14,
scaleLabel: "<%= ' ' + value%> %",
}
//Create the Chart
chart = new Chart(ctx).Bar(data, myoptions);
J'espère que c'est clair maintenant
Cordialement
Vous pouvez vérifier la bulle d'aide css - http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration
tooltips:
{
bodyFontColor: "#000000", //#000000
bodyFontSize: 50,
bodyFontStyle: "bold",
bodyFontColor: '#FFFFFF',
bodyFontFamily: "'Helvetica', 'Arial', sans-serif",
footerFontSize: 50,
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
if(tooltipItem.index == 0) {
return "<?php echo $data1;?>";
}
else if(tooltipItem.index == 1) {
return "<?php echo $data2;?>";
}
else if(tooltipItem.index == 2) {
return "<?php echo $data3;?>";
}
else {
return "<?php echo $data4; ?>";
}
},
},
},
La nouvelle version de chart.js, version 2, se trouve ici:
https://github.com/nnnick/Chart.js/releases
La version 2 ajoute tooltip callbacks
:
Chaque rappel d'infobulle (beforeTitle, title, afterTitle, etc.) accepte une chaîne ou un tableau. Si un tableau est utilisé, il produira plusieurs lignes. Les infobulles viennent maintenant avec beaucoup plus d'options pour la personnalisation visuelle.
Cependant il y a un fork de chart.js appelé chartNew.js, trouvé ici:
https://github.com/FVANCOP/ChartNew.js/
Il ajoute plusieurs améliorations importantes au vénérable chart.js, notamment:
fonctions d'info-bulle (lorsque vous téléchargez/décompressez, regardez dans le dossier Samples
et regardez annotateFunction.html
. Lorsque vous survolez n'importe quel point, vous pouvez tout faire.)
passer un tableau de couleurs à un graphique à barres (au lieu de chaque barre en série ayant la même couleur)
mettre du texte sur la carte où vous le voulez
beaucoup d'etceteras.
Notez que chart.js a été considérablement amélioré dans la version 2, mais la nouvelle version n’est pas totalement compatible avec les versions antérieures (le simple passage au plug-in v2 a cassé mon code existant), alors que chartNew.js fonctionnera avec l’ancien code tout en étendant les capacités.
J'ai trouvé cette page utile:
https://github.com/nnnick/Chart.js/blob/master/samples/pie-customTooltips.html
Il montre où et comment définir la fonction de votre info-bulle personnalisée, ainsi qu'un exemple de style . J'ai dû modifier le code pour répondre à mes besoins, mais c'est un excellent exemple de la façon de mettre en œuvre l'info-bulle personnalisée. fonctionnalité.
Quelques choses à noter qui m'ont jeté au début:
1) L'identifiant dans les règles de style doit être modifié pour correspondre à votre div d'infobulle. (c'est évident, mais je ne l'ai pas compris au début)
2) tooltip.text suivra le format que vous avez défini pour 'tooltipTemplate' dans vos options, ou le tooltipTemplate par défaut défini dans chart.js