web-dev-qa-db-fra.com

Comment ajouter une étiquette dans chart.js pour le camembert

Je montre un graphique à secteurs. Mais comment afficher les étiquettes dans les camemberts.

Vous trouverez ci-dessous le code chart.js pour le graphique à secteurs.

this.Pie = function(data, options) {

  chart.Pie.defaults = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    animation: true,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    onAnimationComplete: null
  };

  var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;

  return new Pie(data, config, context);
};

et ci-dessous est le code du fichier html pour l'affichage du graphique à secteurs

code:

var data = [{
  value: 20,
  color: "#637b85"
}, {
  value: 30,
  color: "#2c9c69"
}, {
  value: 40,
  color: "#dbba34"
}, {
  value: 10,
  color: "#c62f29"
}];

var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);
javascriptcharts
27
user3440583

EDIT: http://jsfiddle.net/nCFGL/223/ Mon exemple.

Vous devriez pouvoir aimer ce qui suit:

var pieData = [{
    value: 30,
    color: "#F38630",
    label: 'Sleep',
    labelColor: 'white',
    labelFontSize: '16'
  },
  ...
];

Inclure les fichiers Chart.js situés à:

https://github.com/nnnick/Chart.js/pull/35

16
FiringSquadWitness

Il n'est pas nécessaire d'utiliser une autre bibliothèque telle que newChart ou d'utiliser les demandes d'extraction d'autres personnes pour extraire ceci. Tout ce que vous avez à faire est de définir un objet d'options et d'ajouter l'étiquette où vous le souhaitez et comme vous le souhaitez dans l'info-bulle.

var optionsPie = {
    tooltipTemplate: "<%= label %> - <%= value %>"
}

Si vous souhaitez que l'info-bulle soit toujours affichée, vous pouvez apporter d'autres modifications aux options:

 var optionsPie = {
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
            this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>"
    }

Dans vos éléments de données, vous devez ajouter la propriété d'étiquette et la valeur souhaitées, et c'est tout.

data = [
    {
        value: 480000,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Tobacco"
    }
];

Maintenant, tout ce que vous avez à faire est de passer l'objet options après les données au nouveau graphique à secteurs comme ceci: new Chart(ctx).Pie(data,optionsPie) et vous avez terminé.

Cela fonctionne probablement mieux pour les tartes qui ne sont pas très petites.

Camembert avec étiquettes

40
Ivan Dimov

La solution de Rachel fonctionne bien, même si vous devez utiliser le script tiers de raw.githubusercontent.com

A l'heure actuelle, une fonctionnalité est affichée sur la page de destination lors de la publication du script "modulaire". Vous pouvez y voir une légende avec cette structure:

<div class="labeled-chart-container">
    <div class="canvas-holder">
        <canvas id="modular-doughnut" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
    </div>

<ul class="doughnut-legend">
    <li><span style="background-color:#5B90BF"></span>Core</li>
    <li><span style="background-color:#96b5b4"></span>Bar</li>
    <li><span style="background-color:#a3be8c"></span>Doughnut</li>
    <li><span style="background-color:#ab7967"></span>Radar</li>
    <li><span style="background-color:#d08770"></span>Line</li>
    <li><span style="background-color:#b48ead"></span>Polar Area</li>
</ul>
</div>

Pour ce faire, ils utilisent l'option de configuration du graphique legendTemplate

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

Vous pouvez trouver la configuration ici sur chartjs.org Cela fonctionne pour tous les graphiques bien que cela ne fasse pas partie de configuration globale du graphique .

Ensuite, ils créent la légende et l'ajoutent au DOM comme suit:

var legend = myPie.generateLegend();
$("#legend").html(legend);

Échantillon Voir aussi mon exemple JSFiddle

9
Smamatti

Utilisez ChartNew.js au lieu de Chart.js

...

J'ai donc retravaillé Chart.js. La plupart des modifications sont associées aux requêtes dans les numéros "GitHub" de Chart.js.

Et voici un exemple http://jsbin.com/lakiyu/2/edit

var newopts = {
    inGraphDataShow: true,
    inGraphDataRadiusPosition: 2,
    inGraphDataFontColor: 'white'
}
var pieData = [
    {
        value: 30,
        color: "#F38630",
    },
    {
       value: 30,
       color: "#F34353",
    },
    {
        value: 30,
        color: "#F34353",
    }
]
var pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx).Pie(pieData, newopts);

Il fournit même un éditeur graphique http://charts.livegap.com/

Si charmant.

8
Frank Fang

Pour ceux qui utilisent des versions plus récentes de Chart.js, vous pouvez définir une étiquette en définissant le rappel pour tooltips.callbacks.label dans les options.

Exemple de ceci serait:

var chartOptions = {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return 'label';
            }
        }
    }
}
4
arockburn